【html学习笔记14】- 表格

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

一个简单的html表格：

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

【html学习笔记14】- 表格

表单元格<td>

每个表单元格都由<td>和</td>标签定义。td代表表数据（table data）。<td>和</td>之间的所有内容都是表格单元格的内容（注意：表格单元格可以包含各种HTML元素：文本，图像，列表，链接，其他表格等。）

【html学习笔记14】- 表格

表行<tr>

每个表格行都以<tr>开头，以</tr>结尾。tr代表表行（table row）。可以在表中拥有任意数量的行;只需确保每行中的单元格数量一样即可（有时，一行的单元格可能比另一行少或多）

【html学习笔记14】- 表格

表标题<th>

有时可能希望单元格是表格标题单元格。在这些情况下，使用标记<th>而不是标记<td>。th代表表头（table header）。默认情况下，该元素中的文本是粗体和居中，但可以用CSS改变它。

【html学习笔记14】- 表格

表格边框

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

双边框表格

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

【html学习笔记14】- 表格

单边框表格

将 CSS 属性设置为。border-collapse: collapse：

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

【html学习笔记14】- 表格

表格边框样式

设置每个单元格的背景颜色，并赋予边框白色（与文档背景一样）,如下所示：

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

【html学习笔记14】- 表格

圆角边框

对于该属性，边框变为圆角：border-radius

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

【html学习笔记14】- 表格

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

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

【html学习笔记14】- 表格

虚线表边框

使用border-style属性，可以设置边框的外观。允许选择下面的值：

【html学习笔记14】- 表格

 th, td {
  border-style: dotted;
}

【html学习笔记14】- 表格

边框颜色

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

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

表格大小

HTML 表格可以具有不同的大小，每列、每行或整个表。将style属性与width或height属性一起使用可指定表、行或列的大小。

设置表宽

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

<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>

【html学习笔记14】- 表格

这里使用百分比作为宽度的大小单位意味着此元素与其父元素相比宽度，在本例中父元素为<body>元素。

HTML 表格列宽

若要设置特定列的大小，请在style与<th>或<td>上添加属性：

<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学习笔记14】- 表格

HTML 表格行高

若要设置特定行的高度，请在表行上添加属性style：

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</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>

HTML表格表头

HTML 表可以具有每列或每行的标题，也可以具有许多列/行的标题。

【html学习笔记14】- 表格

表格标题

表头由元素th定义。每个元素th代表一个表格单元格。

例如水平表标题：

<table>
  <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>

【html学习笔记14】- 表格

再例如垂直表标题

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

【html学习笔记14】- 表格

又例如对齐表标题

默认情况下，表格标题为粗体且居中。若要左对齐表标题，使用 CSS 属性：text-align

th {
  text-align: left;
}

【html学习笔记14】- 表格

标题可以跨越两列或多列。使用元素<th>上的属性：colspan

<table>
  <tr>
    <th colspan="2">Name</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学习笔记14】- 表格

表题

可以添加标题作为整个表格的标题。使用以下标签：<caption>。标签<caption> 应紧跟在标签<table>之后插入。

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

【html学习笔记14】- 表格

HTML 表格填充和间距(Table Padding & Spacing)

HTML 表格可以调整单元格内的填充，也可以调整单元格之间的间距。

HTML 表格 – 单元格填充

单元格填充是单元格边缘和单元格内容之间的空间。默认情况下，填充设置为 0。若要在表格单元格上添加填充，请使用 CSS 属性：padding

th, td {
  padding: 15px;
}

【html学习笔记14】- 表格

若要仅在内容上方添加填充，请使用该属性padding-top。

而其他位置则用padding-bottom、padding-left 和属性padding-right：

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

【html学习笔记14】- 表格

HTML 表格 – 单元格间距

单元格间距是每个单元格之间的间距。默认情况下，空间设置为 2 像素。若要更改表单元格之间的间距，请使用元素上的 CSS 属性： border-spacingtable

table {
  border-spacing: 30px;
}

【html学习笔记14】- 表格

HTML 表格 – Table Colspan & Rowspan

【html学习笔记14】- 表格

若要使单元格跨多列，请使用以下属性：colspan

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>

【html学习笔记14】- 表格

要使单元格跨多行，请使用以下属性：rowspan

<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>

【html学习笔记14】- 表格