HTML5表格_动力节点Java学院整理

2020-04-21 23:36:11易采站长站整理

表头

th元素用于为表格添加表头,可以用来区分数据和对数据的说明。th元素支持如下属性:
  1)colspan:规定单元格可横跨的列数;
  2)rowspan:规定单元格可横跨的行数;
  3)scope:定义将表头数据与单元数据相关联的方法;
  3)headers:由空格分隔的表头单元格ID列表,为数据单元格提供表头信息,该属性不会在普通浏览器中产生任何视觉变化,但可以被屏幕阅读器使用。


<table>
<tr>
<th>Rank</th><th>Name</th>
<th>Color</th><th>Size</th>
</tr>
<tr>
<th>Favorite:</th>
<td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td><td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>

可以在一行中混合使用th和td。

让单元格关联表头

使用td的headers属性可以将单元格和表头关联,关联的目的主要是供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。headers属性可以为一个或多个th单元格的id属性值:


<table border="1" width="100%">
<tr>
<th id="name">Name</th>
<th id="Email">Email</th>
<th id="Phone">Phone</th>
<th id="Address">Address</th>
</tr>
<tr>
<td headers="name">George Bush</td>
<td headers="Email">someone@example.com</td>
<td headers="Phone">+789451236</td>
<td headers="Address">Fifth Avenue New York,USA</td>
</tr>
</table>

构造复杂表头

使用th的colspan和rowspan属性可以构造复杂表头。


<table border="1">
<tr>
<th colspan="2">Company in USA</th>
</tr>
<tr>
<th>Name</th><th>Addr</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
<tr>
<td>Google, Inc.</td>
<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
</tr>
</table>

为表格添加结构