HTML：表格

来源：互联网发布：python赚外快编辑：程序博客网时间：2024/04/28 17:35

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

0 0