html - 表格图片对齐问题

标签 html css html-table alignment

我第一次在这里发帖,因为如果通常我能够在其他答案中找到我的代码问题的解决方案,这一次,无论我尝试什么,它都不起作用。

我正在做一个有两行的表格,第一行基本上是图片,链接一些 PDF 文档,标题在下面(第二行)。

问题是图片的大小不同(无法更改)。我希望它们在行的底部对齐,在分隔线之前有一个小边距。

现在,它们居中(我猜是默认情况下),这还不错,但不是我想要的。 当它们居中时我遇到的第二个问题是,由于某种原因,该行的第一张图片总是比其余图片高一点。想不通为什么。

希望你能帮助我编写下面的代码(我认为它充满了错误,因为几个调用不起作用并且可能会被删除)。

<table width="780"; bgcolor="#e8e8e8" style="table-layout:fixed" VALIGN="top">

<tr>


<td style="word-wrap: break-word;"; ALIGN="CENTER">
<div align="center";>

<a href="PDF URL" target="_blank">
        <img src="URL" alt="ALT">
    </a>
</div>
</td>

<td>
<div align="center">
<a href="PDF URL" target="_blank">
       <img src="URL" alt="ALT">
    </a>
</div>
</td>

<td>
<div align="center">
<a href="PDF URL" target="_blank">
       <img src="URL" alt="ALT">
    </a>
</div>
</td>



</tr>
<tr>
<td><div align="center"><p style="font-size:11px"><a title="TITLE1" href="URL" target="_blank">TITLE1</p></a>
</div></td>
<td><div align="center"><p style="font-size:11px"><a title="TITLE2" href="URL" target="_blank">TITLE2</p></a>
</div></td>
<td><div align="center"><p style="font-size:11px"><a title="TITLE3" href="URL" target="_blank">TITLE3</p></a>
</div></td>
<td><div align="center"><p style="font-size:11px"><a title="TITLE4" href="URL" target="_blank">TITLE4</p></a>
</div></td>

{/tr}
{/table}

最佳答案

您应该首先在标题中包含一个 .css 文件调用,如下所示:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

然后你可以创建一个“mystyle.css”文件,以便为你的表格应用你想要的所有样式。

看看这个页面。 W3School - CSS

您有一些关于如何更改颜色、边距、背景图像等的示例。

编辑:

如果您想要应用 .html 文件中的所有样式,请尝试查看此网站。 http://www.w3schools.com/tags/

你有所有的 html 标签,选择你想要的标签并查看可以使用的属性。

关于html - 表格图片对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16144743/

相关文章:

javascript - 如何使用 HTMLTableElement.insertRow 在表格末尾插入行

javascript - Jquery 在某个索引处向表中插入新行

css - 从 scss 文件转换为 css 文件时如何避免将任何特定的 scss 文件转换为 css?

php - 将表格行更改为链接

javascript - 将外部标记正确加载到多个页面中

javascript - 使用 Javascript 从整个网页中删除所有具有特定类的 span 标签

html - Jekyll 博客文章标题相互堆叠

javascript - 如何在 WordPress 的 front-page.php 中正确使用插件

javascript - <td> 有假想的中间填充

html - 居中对齐同一行和同一容器中的元素