1. 创建标准的表格
Code:
<table border="2" style="text-align:center"> <!表格的开始标签,定义边框为2,定义文本居中显示>
<tr> <!第1行开始标签>
<th>Heading1</th> <! 用<th></th> 是定义表格标题的列,第1行,第1列>
<th>Heading2</th> <! 用<th></th> 是定义表格标题的列,第1行,第2列>
<th>Heading3</th> <! 用<th></th> 是定义表格标题的列,第1行,第3列>
<th>Heading4</th> <! 用<th><th> 是定义表格标题的列,第1行,第4列>
</tr> <!第1行结束标签>
<tr> <!第2行开始标签>
<td>row1,cell1</td> <! 用<td></td> 是定义表格内容的列,第2行,第1列>
<td>row1,cell2</td> <! 用<td></td> 是定义表格内容的列,第2行,第2列>
<td>row1,cell3</td> <! 用<td></td> 是定义表格内容的列,第2行,第3列>
<td>row1,cell4</td> <! 用<td></td> 是定义表格内容的列,第2行,第4列>
</tr> <!第2行结束标签>
<tr> <!第3行开始标签>
<td>row2,cell1</td> <! 用<td></td> 是定义表格内容的列,第3行,第1列>
<td>row2,cell2</td> <! 用<td></td> 是定义表格内容的列,第3行,第2列>
<td>row2,cell3</td> <! 用<td></td> 是定义表格内容的列,第3行,第3列>
<td>row2,cell4</td> <! 用<td></td> 是定义表格内容的列,第3行,第4列>
</tr> <!第3行结束标签>
<tr> <!第4行开始标签>
<td>row3,cell1</td> <! 用<td></td> 是定义表格内容的列,第4行,第1列>
<td>row3,cell2</td> <! 用<td></td> 是定义表格内容的列,第4行,第1列>
<td>row3,cell3</td> <! 用<td></td> 是定义表格内容的列,第4行,第1列>
<td>row3,cell4</td> <! 用<td></td> 是定义表格内容的列,第4行,第1列>
</tr> <!第4行结束标签>
</table> <!表格结束标签>
运行效果如下:
| row1,cell1 | row1,cell2 | row1,cell3 | row1,cell4 |
| row2,cell1 | row2,cell2 | row2,cell3 | row2,cell4 |
| row3,cell1 | row3,cell2 | row3,cell3 | row3,cell4 |
说明:
<table></table>: 定义表格开始和结束的标签
<th></th>: 定义表格标题的开始和结束的标签
<tr></tr>: 定义每一行开始和结束的标签
<td></td>: 定义每一列开始和结束的标签
2. 创建不规则的表格
A 横跨多列的表格
Code:
<table border="1" style="text-align:center"> <!表格的开始标签,定义边框为1,定义文本居中显示>
<tr> <!第1行开始标签>
<th>Heading1</th> <! 用<th></th> 是定义表格标题的列,第1行,第1列>
<th>Heading2</th> <! 用<th></th> 是定义表格标题的列,第1行,第2列>
<th>Heading3</th> <! 用<th></th> 是定义表格标题的列,第1行,第3列>
<th>Heading4</th> <! 用<th><th> 是定义表格标题的列,第1行,第4列>
</tr> <!第1行结束标签>
<tr> <!第2行结束标签>
<td>row1,cell1</td> <! 用<td></td> 是定义表格内容的列,第2行,第1列>
<td colspan="2">row1,cell2</td> <! 用<td></td> 是定义表格内容的列,第2行,第2列,并且要占2列>
<td>row1,cell3</td> <! 用<td></td> 是定义表格内容的列,第2行,第3列>
</tr> <!第2行结束标签>
<tr> <!第3行开始标签>
<td>row2,cell1</td> <! 用<td></td> 是定义表格内容的列,第3行,第1列>
<td>row2,cell2</td> <! 用<td></td> 是定义表格内容的列,第3行,第2列>
<td colspan="2">row2,cell3</td> <! 用<td></td> 是定义表格内容的列,第3行,第3列,并且要占2列>
</tr> <!第3行结束标签>
<tr> <!第4行开始标签>
<td>row3,cell1</td> <! 用<td></td> 是定义表格内容的列,第4行,第1列>
<td colspan="3">row3,cell2</td> <! 用<td></td> 是定义表格内容的列,第4行,第1列,并且要占3列>
</tr> <!第4行结束标签>
</table> <!表格结束标签>
运行效果如下:
| Heading1 | Heading2 | Heading3 | Heading4 |
| row1,cell1 | row1,cell2 | row1,cell3 | |
| row2,cell1 | row2,cell2 | row2,cell3 | |
| row3,cell1 | row3,cell2 | ||
说明:
colspan="2": 合并两列 colspan="3": 合并3列
B. 横跨多行的表格
Code:
<table border="2" style="text-align:center"> <!表格的开始标签,定义边框为2,定义文本居中显示>
<tr> <!第1行开始标签>
<th>Heading1</th> <! 用<th></th> 是定义表格标题的列,第1行,第1列>
<th>Heading2</th> <! 用<th></th> 是定义表格标题的列,第1行,第2列>
<th>Heading3</th> <! 用<th></th> 是定义表格标题的列,第1行,第3列>
<th>Heading4</th> <! 用<th></th> 是定义表格标题的列,第1行,第4列>
</tr> <!第1行结束标签>
<tr> <!第2行开始标签>
<td>row1,cell1</td> <! 用<td></td> 是定义表格内容的列,第2行,第1列>
<td rowspan="2">row1,cell2</td> <! 用<td></td> 是定义表格内容的列,第2行,第2列,并且占2行>
<td>row1,cell3</td> <! 用<td></td> 是定义表格内容的列,第2行,第3列>
<td rowspan="3">row1,cell4</td> <! 用<td></td> 是定义表格内容的列,第2行,第4列,并且占3行>
</tr> <!第2行结束标签>
<tr> <!第3行开始标签>
<td>row2,cell1</td> <! 用<td></td> 是定义表格内容的列,第3行,第1列>
<td rowspan="2">row2,cell2</td> <! 用<td></td> 是定义表格内容的列,第3行,第2列,并且占2行>
</tr> <!第3行结束标签>
<tr> <!第4行开始标签>
<td>row3,cell1</td> <! 用<td></td> 是定义表格内容的列,第4行,第1列>
<td>row3,cell2</td> <! 用<td></td> 是定义表格内容的列,第4行,第2列>
</tr> <!第4行结束标签>
</table> <!表格结束标签>
运行结果如下:
| row1,cell1 | row1,cell2 | row1,cell3 | row1,cell4 |
| row2,cell1 | row2,cell2 | ||
| row3,cell1 | row3,cell2 |
说明:
rowspan="2": 合并2行 rowspan="3": 合并3行
