HTML5表格元素.docx

主要从事 ui 设计、 java、网络营销、大数据开发
培训。保就业，保底薪。
第 6章表格元素
学****要点：
表格元素总汇
构建表格解析
本章主要探讨 HTML5中表格元素的用法。 表格的主要用途是以网格的形式显示二维数据。
一．表格元素总汇
表格的基本构成最少需要三个元素： <table> 、 <tr> 、<td> ，其他的一些作为可选辅助存在。
元素名称

说明
table
thead
tbody
tfoot
tr
th
td
col
colgroup
caption

表示表格
表示标题行
表示表格主体
表示表脚
表示一行单元格
表示标题行单元格
表示单元格
表示一列
表示一组列
表示表格标题
二．构建表格解析
1.<table><tr><td> 构建基础表格
<table border="1">
<tr>
<td>
<td>

张三 </td>
男 </td>
主要从事 ui 设计、 java、网络营销、大数据开发
培训。保就业，保底薪。
<td>

未婚 </td>
</tr>
<tr>
<td>
<td>

李四 </td>
女 </td>
<td>

已婚 </td>
</tr>
</table>
解释： <table> 元素表示一个表格的声明， <tr> 元素表示表格的一行， <td> 元
素表示一个单元格。默认情况下表格是没有边框的，所以，在 <table> 元素增加一个 border 属性，设置为 1 即可显示边框。
2.<th> 为表格添加标题单元格
<table border="1" style="width:300px;">
<tr>
<th>
<th>
<th>
</tr>
<tr>

姓名 </th>
性别 </th>
婚姻 </th>
<td>
<td>
<td>
</tr>
<tr>

张三 </td>
男 </td>
未婚 </td>
<td>
<td>
<td>
</tr>
</table>

李四 </td>
女 </td>
已婚 </td>
解释： <th> 元素主要是添加标题行的单元格， 实际作用就是将内部文字居中且
加粗。
这里使用了一个通用属性 style 均属于单元格，包含两个合并属性：

，主要用于