html简单的表格制作
看一个简单的样例
| 标题 1 | 标题 2 | 标题 3 |
|---|---|---|
| 文字 | 文字 | 文字 |
| 文字 | 文字 |
<table border="1"><tr><th align="left">标题 1</th> <!-- 左对齐 --><th align="center">标题 2</th> <!-- 居中对其(默认)--><th align="right">标题 3</th> <!-- 右对齐--></tr><tr><td rowspan="2">col 11</td><td>col 12</td><td>col 13</td></tr><tr><td>col 22</td><td>col 23</td></tr>
</table>
首先,讲解结构
HTML 表格的基本结构:<table>…</table>:定义表格<th>…</th>:定义表格的标题栏(文字加粗)
<tr>…</tr>:定义表格的行<td>…</td>:定义表格的列
解析:
也就是说最外层是table,然后由若干个行tr组成,在若干个tr内有若干个列td组成.
标题由th封装
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。使用边框属性border来显示一个带有边框的表格.
合并单元格
合并单元格,合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”