在HTML（HyperText Markup Language，超文本标记语言）中，<tr> 标签用于定义表格中的一行，一个空的表格可以通过使用 <tr> 和 <td> （或 <th>）标签来创建，即使没有内容填充，这些标签也是必须的，以保持表格结构的完整性，以下是如何用 <tr> 制作一个空的表格的详细介绍。
创建基本表格结构
创建一个基本的HTML表格需要用到以下标签：<table>, <tr>, <td> 和 <th>。<table> 是表格的容器，<tr> 代表表格中的行，而 <td> 用于存放数据，<th> 通常用于表头。
<table border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
上述代码将生成一个2x2的空表格，border="1" 属性为表格添加了边框，以便我们可以看到表格的轮廓。
添加更多行和列
要增加更多的行和列，只需添加更多的 <tr> 和 <td> 标签，要创建一个3行4列的空表格，可以这样写：
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
使用标题行 <th>
通常，表格的第一行用作标题行，这可以通过替换 <td> 标签为 <th> 来实现。<th> 标签不仅用于定义表头单元格，还会自动加粗显示文字，使其更加醒目。
<table border="1">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
样式化表格
虽然本例中的表格是空的，但在实际的网页设计中，我们可能会对表格进行样式化，可以使用CSS来改变边框颜色、单元格背景色、文字颜色等。
<style>
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: f2f2f2;
}
</style>
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
在这个例子中，<style> 标签包含了一些CSS规则，它们改变了表格的外观。border-collapse: collapse; 确保了表格的边框不会重叠或间隔。padding: 8px; 给单元格增加了内边距，使它们看起来不那么拥挤。text-align: center; 将单元格内容居中。
相关问题与解答
Q1: 如果我想创建一个具有不同数量列的表格，我该如何修改 <tr> 和 <td> 标签？
A1: 你可以根据需要增减每个 <tr> 内的 <td> 标签数量来控制每行的列数，若想创建一行只有两列的表格，只需在该 <tr> 内放置两个 <td> 标签即可。
Q2: 如何使表格中的文本居左而不是居中？
A2: 要改变单元格中文本的对齐方式，可以修改CSS规则中的 text-align 属性，将其值改为 left 即可使文本居左。
td {
text-align: left;
}
通过调整HTML标签和CSS属性，你可以完全控制你的表格结构和外观，即使它们是空的。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/410834.html
微信扫一扫 