点击刷新
- <table> 标签
- 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- border 属性：规定表格单元拥有边框
- 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- <tr> 表格行标签
- 用来定义表格的一行。由于HTML表格是面向行的，所以必须分别表示每一行
- tr 元素可以在 table，thead，tbody 和 tfoot 元素内使用
- tr 元素内可以包含一个或者多个 td 或 th 元素
- <td> 表格单元格标签
- 用来定义表格单元格，可以同 colspan，rowspan，headers 局部属性使用
- colspan： 左右合并单元格，该属性规定了单元格可横跨的列数，该属性的值必须是整数
- rowspan：上下合并单元格，该属性规定了单元格可横跨的行数，该属性的值必须是整数
- cellpadding：规定单元格边沿与其内容之间的空白
- cellpadding="0" 是让单元格边框线与单元格中的内容之间的距离为 0 像素，即单元格中内容紧挨着单元格的边线。
- cellspacing：规定单元格之间的空白
- cellspacing="0" 是让各单元格之间的缝隙为 0 象素
- headers：该属性的值是一个或多个单元的 ID 属性值，将单元格与列标题相关联，可用于使用屏幕阅读器
- width：规定表格宽度
- height：规定表格高度
- align：规定表格相对周围元素的对齐方式
- left
- center
- right
- 用来定义表格单元格，可以同 colspan，rowspan，headers 局部属性使用
- <th> 标题单元格标签
- 用来定义标题单元格，使我们有效区分数据及其描述
- 它同 <td> 元素具有相同的局部属性，两者有如下区别：
- <th> 是表示头标记，通常位于首行或者首列。而且 <th> 中的文字默认会被加粗，而 <td> 是不会的
- <td> 是数据标记，表示单元格的具体的数据
- 快速制表
- 如下快速生成 3 行 2 列的方法
<body> table>tr*3>td*2 <!-- 输入完后，再按 Tab 键 --> </body>
<body> <table border="1"> <tr> <th>姓名</th> <th>年纪</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>18</td> <td>一班</td> </tr> </table> </body>
<body> <table border="1" width="200" height="20"> <tr> <th>姓名</th> <th>年纪</th> <th>班级</th> </tr> <tr align="center"> <td>张三</td> <td>18</td> <td>一班</td> </tr> </table> </body>
<body> <table border="1" width="200" height="20"> <tr> <th>姓名</th> <th>年纪</th> <th>班级</th> </tr> <tr> <td>张三</td> <td></td> <td rowspan="2"></td> <!-- 上下合并 --> </tr> <tr> <td>李四</td> <td></td> <!-- <td></td> --> </tr> <tr> <td>王五</td> <td colspan="2"></td> <!-- 左右合并 --> <!-- <td></td> --> </tr> </table> </body>
© 著作权归作者所有
举报
相关热门文章
发表评论
0/200
