您的位置：首页 > Web前端 > HTML

第15节 html表格的基本结构、属性和用法

2017-02-13 15:57 627 查看

表格的基本结构、属性和用法

<html>
<head>
<title>表格的基本结构、属性和用法</title>
</head>
<body>
<!--表格的基本结构  table表格标签 border表格边框宽度（1像素） tr表格的行标签 td单元格标签 -->
<h1 align= center>表格</h1>
<!-- <center> -->
<!-- <table border=1> -->
<!-- <tr> <td>1行1列</td> <td>1行2列</td> <td>1行3列</td> <td>1行4列</td></tr> -->
<!-- <tr> <td>2行1列</td> <td>2行2列</td> <td>2行3列</td> <td>2行4列</td></tr> -->
<!-- <tr> <td>3行1列</td> <td>3行2列</td> <td>3行3列</td> <td>3行4列</td></tr> -->
<!-- <tr> <td>4行1列</td> <td>4行2列</td> <td>4行3列</td> <td>4行4列</td></tr> -->
<!-- </table> -->
<!-- </center> -->

<!--合并单元格 colspan属性左右合并单元格 rowspan属性上下合并单元格-->
<center>
<table border=1>
<tr><td>11</td> <td>12</td> <td>13</td></tr>
<!--水平合并-->
<tr><td colspan="3">212223</td>
<tr><td>31</td> <td>32</td> <td>33</td></tr>
</table>
</center>
<hr color=red>
<center>
<table border=1>
<!--垂直合并-->
<tr><td>11</td> <td rowspan="3">122232</td> <td>13</td></tr>
<tr><td>21</td><td>23</td></tr>
<tr><td>31</td> <td>33</td></tr>
</table>
</center>
<hr color=red>
<center>
<table border=1>
<!--垂直、水平合并-->
<tr> <td rowspan=2 colspan=2>11122122</td>   <td>13</td></tr>
<tr>  <td>23</td>   </tr>
<tr> <td>31</td>  <td>32</td>  <td>33</td></tr>
</table>
</center>
<hr color=red>
<center>
<table border=1>
<!--表格中内容位置设置-->
<tr> <td>11</td>  <td align=right>12</td> <td>13</td> <td>14</td></tr>
<tr> <td>21</td>  <td align=center rowspan=2 colspan=2>22233233</td>  <td>24</td></tr>
<tr> <td>31</td>   <td>34</td></tr>
<tr> <td>41</td>  <td>42</td> <td align=rightl>43</td> <td>44</td></tr>
</table>
</center>

<hr color=red>
<!--bgcolor属性设置表格的背景色和边框颜色-->
<center>
<table border=1>
<tr> <td bgcolor=red>1行1列</td> <td bgcolor=blue>1行2列</td> <td bgcolor=yellow>1行3列</td> <td bgcolor=green>1行4列</td></tr>
<tr> <td bgcolor=red>2行1列</td> <td bgcolor=blue>2行2列</td> <td bgcolor=yellow>2行3列</td> <td bgcolor=green>2行4列</td></tr>
<tr> <td bgcolor=red>3行1列</td> <td bgcolor=blue>3行2列</td> <td bgcolor=yellow>3行3列</td> <td bgcolor=green>3行4列</td></tr>
<tr> <td bgcolor=red>4行1列</td> <td bgcolor=blue>4行2列</td> <td bgcolor=yellow>4行3列</td> <td bgcolor=green>4行4列</td></tr>
</table>
</center>
<hr color=red>
<!--cellpadding单元格内容距表格边框的距离(内边距) cellspacing相邻单元格边线的之间的距离(外边距)-->
<center>
<table  border=1 bgcolor="#CCCCCC" height="200" width="200" cellpadding="10"cellspacing="4">
<tr align=center> <td>1行1列</td> <td>1行2列</td> <td>1行3列</td> <td>1行4列</td></tr>
<tr align=center> <td>2行1列</td> <td>2行2列</td> <td>2行3列</td> <td>2行4列</td></tr>
<tr align=center> <td>3行1列</td> <td>3行2列</td> <td>3行3列</td> <td>3行4列</td></tr>
<tr align=center> <td>4行1列</td> <td>4行2列</td> <td>4行3列</td> <td>4行4列</td></tr>
</table>
</center>
<hr color=red>
<!--完整单元格的样式 行组（thead表格表头 tbody表格主体 tfoot表格脚注） th单元格的行头-->
<center>
<table width="400" border=1 bgcolor="#FFFFFF" align=center>
<thead>
<tr bgcolor=green><th colspan="2">产品</th> <th colspan="2">描述信息</th></tr>
</thead>
<tbody align=center>
<tr bgcolor=green><td>公司</td><td>编号</td><td>用途</td><td>价格</td></tr>
<tr><th rowspan="2">大众</th><td>DZ_1</td><td>中端客户</td><td>100.00</td></tr>
<tr><td>DZ_2</td><td>低端客户</td><td>50.00</td></tr>
<tr><th rowspan="2">前沿</th><td>JT-1</td><td>高端客户</td><td>200.00</td></tr>
<tr><td>JY-2</td><td>中断客户</td><td>100.00</td></tr>
</tbody>
<tfoot align=center bgcolor=gray><tr><td>2</td><td>4</td><td>3</td><td>120.00</td></tr></tfoot>
</table>
</center>

</body>
</html>


复制出来可以直接运行。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航