HTML 表格
| 公司 | 联系 | 国家 |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
定义HTML表
使用<table>标记定义HTML表。
每个表行都使用<tr>标记定义。使用<th>标记定义表头。默认情况下，表格标题为粗体并居中。使用<td>标签定义表数据/单元
。
示例
<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>
注意的<td>元素是表中的数据容器。
它们可以包含各种HTML元素; 文字，图像，清单，其他表格等
HTML表格 – 添加边框
如果未指定表格的边框，则将显示无边框。
使用CSS border属性设置边框：
请记住为表格和表格单元格定义边框。
HTML表格 – 折叠边框
如果希望边框折叠为一个边框，请添加CSS border-collapse
属性：
HTML表格 – 添加单元格填充
单元格填充指定单元格内容与其边框之间的空间。
如果未指定填充，则将显示表格单元格而不填充。
要设置填充，请使用CSS padding属性：
HTML表格 – 左对齐标题
默认情况下，表格标题为粗体且居中。
要左对齐表格标题，请使用CSS text-align属性：
HTML表格 – 添加边框间距
边框间距指定单元格之间的间距。
要设置表的边框间距，请使用CSS border-spacing属性：
注意如果表格有折叠边框，border-spacing则无效。
HTML表格 – 跨越多列的单元格
要使单元格跨越多个列，请使用以下colspan属性：
示例
<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2″>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML表 – 跨越多行的单元格
要使单元格跨越多行，请使用以下rowspan属性：
示例
<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML表格 – 添加标题
要为表格添加标题，请使用<caption>标记：
示例
<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>
注意：该<caption>标签必须在紧后，插入<table>标记。
特殊样式的表格
要为特殊表定义特殊样式，请向表中添加id
属性：
示例
<table id=”t01″>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
并添加更多样式：
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
章节总结
- 使用HTML
<table>元素定义表 - 使用HTML
<tr>元素定义表行 - 使用HTML
<td>元素定义表数据 - 使用HTML
<th>元素定义表标题 - 使用HTML
<caption>元素定义表格标题 - 使用CSS
border属性定义边框 - 使用CSS
border-collapse属性折叠单元格边框 - 使用CSS
padding属性向单元格添加填充 - 使用CSS
text-align属性对齐单元格文本 - 使用CSS
border-spacing属性设置单元格之间的间距 - 使用该
colspan属性可使单元格跨越多列 - 使用该
rowspan属性可使单元格跨越多行 - 使用该
id属性唯一地定义一个表
HTML表格标签
| 标签 | 描述 |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/59270.html