首先来看个表格的实例:
<html>
<body>
<table border = "1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
<body>
<table border = "1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>
</body>
</html>
上面的例子定义了一个两行两列的表格如下:
| 100 | 200 |
| 300 | 400 |
可以看出表格是由<table>标签定义的.每个表格都有若干行(由标签<tr>定义),每个行包含若干个单元格(由标签<td>定义).字母td表示的是表中的数据
(table data),即是单元格中数据.单元格中数据可以是图片,标签,文本,列表,表单,水平线等.
border属性是用来指定表格边框的属性,默认的表格是没有边框的.当希望表格由边框时,可以根据需要给border属性不同的值.
- 单元格表头的定义.
代码| name | age |
|---|---|
| Mike | Maye |
| 20 | 23 |
上面的表头是水平的,下面来看下垂直表头的定义.
- 垂直表头的定义.
<table border = "1">
<tr>
<th>name</th>
<td>Mike</th>
</tr>
<tr>
<th>age</th>
<td>20</th>
</tr>
</table>
<tr>
<th>name</th>
<td>Mike</th>
</tr>
<tr>
<th>age</th>
<td>20</th>
</tr>
</table>
| name | Mike |
|---|---|
| age | 20 |
- 空的单元格和表格的标题.
空单元格,即单元格中没有内容.空单元格可以这样定义<td></td>.但是这样定义,浏览器中不会显示单元格的边框.若想空单元格中显示单元格边框,可以添加一个空格占位符.
<td>/ </td>.
表格的标题是有属性"caption"指定的.<table caption = "表格的标题"></table>
- 跨行或跨列的表格
跨行的表格
<table border = "1" caption = "跨行的表格">
<tr>
<th>name</th>
<th colspan = "2">age</th>
</tr>
<tr>
<td>Mike</td>
<td>20</td>
<td>20</td>
</tr>
</table>
<tr>
<th>name</th>
<th colspan = "2">age</th>
</tr>
<tr>
<td>Mike</td>
<td>20</td>
<td>20</td>
</tr>
</table>
| name | age | |
|---|---|---|
| Mike | 20 | 20 |
<table border = "1">
<tr>
<th>name</th>
<td>Mike</td>
</tr>
<tr>
<th rowspan = "2">age</th>
<td>20</td>
</tr>
<tr>
<td>23</td>
</tr>
</table>
<tr>
<th>name</th>
<td>Mike</td>
</tr>
<tr>
<th rowspan = "2">age</th>
<td>20</td>
</tr>
<tr>
<td>23</td>
</tr>
</table>
| name | Mike |
|---|---|
| age | 20 |
| 23 |
表格的基础就到这里,还有很多的表格的属性没有学到.以后再继续学习,例如表格布局.
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
