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}



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

标签： html 表格 html 表格

相关文章

随机文章

您可能还喜欢

您可能还喜欢