HTML Tables
Tables are defined with the <table> tag.
The <tr> element defines a table row 表格行, the <th> element defines a table header 表头, and the <td> element are the data container of the table 单元格.
The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
单元格可包含各种HTML元素:文本、图片、列表、其他表等。
The width of a table can be defined using CSS. 可以通过CSS设定表格宽度
The text in <th> elements are bold and centered by default. 默认:粗体 中间对齐
The text in <td> elements are regular and left-aligned by default. 默认:正常字体 左对齐
<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Table with a Border Attribute
If you do not specify a border for the table, it will be displayed without borders.
如果不设置表格的border,则默认显示的是无边框表格,通过CSS设置border
<style>
table,th,td
{
border:1px solid black;
}
</style>
Table with Collapsed Borders
合并边框模型,将边框会合并为单一的边框,相对于上面的例子。
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>
Table with Cell Padding
Cell padding specifies the space between the cell content and its borders.
单元格内边距定义了单元格内容和边框的空隙。如果不特别设定,则默认以无内边距显示。
通过CSS设定单元格内边距:
th,td
{
padding:15px;
}
Table with Border Spacing
Use the CSS border-spacing property to set the space between the cells.设置单元格间距
table
{
border-spacing:5px;
}
Examples:
1. 竖直显示表头
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
2. 设置表格标题
<table>
<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>
3. 单元格 列扩展 colspan :specifies the number of columns a cell should span
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
4. 单元格 行扩展 rowspan :sets the number of rows a cell should span
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>