HTML:表格

本文介绍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}


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。