HTML创建表格

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/