HTML创建表格

时间：2010-10-19 来源：shylx123

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> <!表格结束标签> 运行效果如下: Heading1 Heading2 Heading3 Heading4


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> <!表格结束标签> 运行结果如下: Heading1 Heading2 Heading3 Heading4


row1,cell1	row1,cell2	row1,cell3	row1,cell4
row2,cell1	row2,cell2
row3,cell1	row3,cell2

说明: rowspan="2": 合并2行 rowspan="3": 合并3行参考:http://www.w3school.com.cn/html/