首页 > Web开发 > 详细

html 表格

时间:2016-12-24 16:41:46      阅读:248      评论:0      收藏:0      [点我收藏+]
HeadingAnother Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

背景颜色:

First Row
Second Row

背景图像:

First Row
Second Row

这个表格没有边框:

100 200 300
400 500 600

这个表格也没有边框:

100 200 300
400 500 600

横跨两列的单元格:

姓名电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格:

姓名 Bill Gates
电话 555 77 854
555 77 855
【表格举例】
 列-A列-B列-C
行-1 A1 B1 C1-C2
行-2 A2 B2
行-3 A3 A3-B3


表格源码

<table border="1">
<tbody>
<tr><th>Heading</th><th>Another Heading</th></tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>
<h4>背景颜色:</h4>
<table border="1" bgcolor="red">
<tbody>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</tbody>
</table>
<h4>背景图像:</h4>
<table border="1">
<tbody>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</tbody>
</table>
<h4>这个表格没有边框:</h4>
<table>
<tbody>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</tbody>
</table>
<h4>这个表格也没有边框:</h4>
<table border="0">
<tbody>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</tbody>
</table>
<h4>横跨两列的单元格:</h4>
<table border="1">
<tbody>
<tr><th>姓名</th><th colspan="2">电话</th></tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</tbody>
</table>
<h4>横跨两行的单元格:</h4>
<table border="1">
<tbody>
<tr><th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr><th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</tbody>
</table>
<table style="width: 250px;" border="4" align="center"><caption>【表格举例】</caption>
<tbody>
<tr bgcolor="#cccccc"><th>&nbsp;</th><th>列-A</th><th>列-B</th><th>列-C</th>
 </tr>
<tr align="center">
<td>行-1</td>
<td>A1</td>
<td>B1</td>
<td rowspan="2">C1-C2</td>

 </tr>
<tr align="center">
<td>行-2</td>
<td>A2</td>
<td>B2</td>

 </tr>
<tr align="center">
<td>行-3</td>
<td>A3</td>
<td colspan="2">A3-B3</td>

 </tr>

</tbody>
</table>

 

html 表格

原文:http://www.cnblogs.com/endv/p/6217469.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!