前端必知必会-html表格设置_html单元格怎么设置-CSDN博客

本文链接：https://blog.csdn.net/qq_24018193/article/details/140572716

文章目录

HTML 表格
定义 HTML 表格
表格单元格
表格行
表格标题
HTML 表格边框
折叠表格边框
样式化表格边框
圆形表格边框
虚线表格边框
边框颜色
HTML 表格大小
表格的宽度
HTML 表格列宽
HTML 表格行高
总结

HTML 表格

HTML 表格允许 Web 开发人员将数据排列成行和列。

示例

公司	联系人	国家/地区
Alfreds	Futterkiste	Maria Anders 德国
Centro comercial Moctezuma	Francisco Chang	墨西哥
Ernst Handel	Roland Mendel	奥地利
Island Trading	Helen Bennett	英国
Laughing Bacchus Winecellars	Yoshi Tannamuri	加拿大
Magazzini Alimentari Riuniti	Giovanni Rovelli	意大利

定义 HTML 表格

HTML 中的表格由行和列内的表格单元格组成。

示例
一个简单的 HTML 表格：

<table>
	<tr>
		<th>公司</th>
		<th>联系人</th>
		<th>国家/地区</th>
	</tr>
	<tr>
		<td>Alfreds Futterkiste</td>
		<td>Maria Anders</td>
		<td>德国</td>
	</tr>
	<tr>
		<td>Centro comercial Moctezuma</td>
		<td>Francisco Chang</td>
		<td>墨西哥</td>
	</tr>
</table>

表格单元格

每个表格单元格由 <td> 和 </td> 标签定义。

td 代表表格数据。

<td> 和 </td> 之间的所有内容都是表格单元格的内容。

示例

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

注意：表格单元格可以包含各种 HTML 元素：文本、图像、列表、链接、其他表格等。

表格行

每个表格行都以 <tr> 开头，以 </tr> 标签结尾。

tr 代表表格行。

示例

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

表格中可以包含任意多的行；只需确保每行的单元格数量相同即可。

注意：有时一行中的单元格可能比另一行中的单元格少或多。

表格标题

标题单元格请使用 <th> 标签而不是 <td> 标签：

th 代表表格标题。

示例
让第一行成为表头单元格：

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

默认情况下，<th>元素中的文本为粗体且居中，但可以用 CSS 进行更改。

HTML 表格边框

HTML 表格可以具有不同样式和形状的边框。
要添加边框，请在 table、th 和 td 元素上使用 CSS border 属性：

示例

table, th, td {
border: 1px solid black;
}

折叠表格边框

要避免出现如上例中的双边框，请将 CSS border-collapse 属性设置为 collapse。

这将使边框折叠为单个边框：

示例

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

样式化表格边框

如果您设置每个单元格的背景颜色，并将边框设为白色（与文档背景相同），则会给人一种不可见边框的印象：

示例

table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

圆形表格边框

使用 border-radius 属性，边框将变成圆角：

示例

table, th, td {
border: 1px solid black;
border-radius: 10px;
}

通过在 css 选择器中省略 table 来跳过表格周围的边框：

示例

th, td {
border: 1px solid black;
border-radius: 10px;
}

虚线表格边框

使用 border-style 属性，您可以设置边框的外观。

允许使用以下值：

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

示例

th, td {
border-style: dotted;
}

边框颜色

使用 border-color 属性，您可以设置边框的颜色。

示例

th, td {
border-color: #96D4D4;
}

HTML 表格大小

HTML 表格的每列、每行或整个表格可以有不同的大小。

使用带有宽度或高度属性的样式属性来指定表格、行或列的大小。

表格的宽度

要设置表格的宽度，请将 style 属性添加到 <table> 元素：

示例
将表格的宽度设置为 100%：

<table style="width:100%">
	<tr>
		<th>Firstname</th>
		<th>Lastname</th>
		<th>Age</th>
	</tr>
	<tr>
		<td>Jill</td>
		<td>Smith</td>
		<td>50</td>
	</tr>
	<tr>
		<td>Eve</td>
		<td>Jackson</td>
		<td>94</td>
	</tr>
</table>

注意：使用百分比作为宽度的尺寸单位意味着此元素与其父元素（在本例中为 <body> 元素）相比有多宽。

HTML 表格列宽

要设置特定列的大小，请在 <th> 或 <td> 元素上添加样式属性：

示例
将第一列的宽度设置为 70%：

<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML 表格行高

要设置特定行的高度，请在表格行元素上添加样式属性：

示例
将第二行的高度设置为 200像素：

<table style="width:100%">
	<tr>
		<th>名字</th>
		<th>姓氏</th>
		<th>年龄</th>
	</tr>
	<tr style="height:200px">
		<td>Jill</td>
		<td>Smith</td>
		<td>50</td>
	</tr>
	<tr>
		<td>Eve</td>
		<td>Jackson</td>
		<td>94</td>
	</tr>
</table>