HTML：表格
浏览数：41 /
时间：2015年06月09日
本文介绍html中表格的基本用法。
代码整理自w3school：http://www.w3school.com.cn
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>表格</title>
<head>
<link rel="stylesheet" type="text/css" href="css/tableStyle.css">
</head>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据(列)由 td 标签开始。</p>
<!--基础-->
<h4>一行一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列，较粗的边框：</h4>
<table border="5">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>三行三列，带表头，带标题：</h4>
<table border="1">
<caption>省份概况</caption>
<tr>
<th>省份</th>
<th>面积</th>
<th>人口</th>
</tr>
<tr>
<tr>
<td>河南省</td>
<td>16.9</td>
<td>9800</td>
</tr>
<tr>
<td>湖北省</td>
<td>18.6</td>
<td>6200</td>
</tr>
</table>
<h4>三行两列，带垂直表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<tr>
<th>年龄</th>
<td>19</td>
</tr>
<tr>
<th>爱好</th>
<td>篮球</td>
</tr>
</table>
<hr/>
<!--单元格没有内容时，边框可能无法显示，因此需要添加空白内容nbsp-->
<h4>某个单元格没有内容，边框可能无法显示：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td>400</td>
</tr>
</table>
<h4>添加空白内容nbsp之后：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td> </td>
<td>400</td>
</tr>
</table>
<hr/>
<!--跨行或跨列的单元格-->
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<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>
</table>
<!--在单元格内显示其它元素-->
<h4>在单元格内显示其它元素</h4>
<table border="1">
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>这个单元格包含一个表格
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一个列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
<hr/>
<!--单元格内的边距：cellpadding-->
<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有 cellpadding：</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<hr/>
<!--单元格间距：cellspacing-->
<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有 cellspacing：</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<!--表格的背景颜色和背景图像，可添加至整个表格或某个单元格-->
<h4>表格添加背景颜色：</h4>
<table border="1" bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>表格添加背景图像：</h4>
<table border="1" background="images/backgrond_image.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>单元格添加背景颜色/图像：</h4>
<table border="1">
<tr>
<td background="images/backgrond_image.jpg">First</td>
<td bgcolor="red">Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<hr/>
<!--使用align属性设置单元格内元素的对齐方式-->
<table width="400" border="1">
<tr>
<th align="left">消费项目</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
<hr/>
<!--带有 thead、tbody 以及 tfoot 元素的 HTML 表格-->
<h4>表格的页眉，主体，页脚(使用css自定义样式)</h4>
<table border="1" class="baseTableStyle" cellpadding="10">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<br/><br/>
</body>
</html>CSS文件：tableStyle.css
table.baseTableStyle thead
{color:green}
table.baseTableStyle tbody
{color:blue;height:50px}
table.baseTableStyle tfoot
{color:red}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
