HTML 13 表格

HTML 13 表格

 

1.格式：

<table border=“1”>

  <tr>

    <td>表格1行1列内容</td>

    <td>表格1行2列内容</td>

    <td>表格1行3列内容</td>

  </tr>

  <tr>

    <td>表格2行1列内容</td>

    <td>表格2行2列内容</td>

  </tr>

</table>

结果：

解释：

A.表格用<table></table>来定义

B.<tr></tr>定义行，具体是第几行看是<table>里的第几个<tr>。（tr是table row）

C.<td>定义此行中列中的内容（单元格的内容），具体第几列看是<tr>中的第几个。列的内容可以是文本，图像，链接，列表，段落，表单，水平线，表格等等（td是table data）

 

D.border是边框属性，=0无边框，=1有边框，=1+粗边框，不写border默认无边框。

 

 

2.表格的表头<th>（table head），表头字体自动加粗，并居中

格式：<th>表头</th>

例如：

A.水平的表头

<table border=“1”>

  <tr>

    <th>姓名</th>

    <th>年龄</th>

  </tr>

  <tr>

    <td>李<td>

    <td>25</td>

  </tr>

</table>

结果：

 

B.垂直的表头

<table border=“1”>

  <tr>

    <th>姓名</th>

    <td>李<td>

  </tr>

  <tr>

    <th>年龄</th>

    <td>25</td>

  </tr>

</table>

 

 

3.空单元格，<td> &nbsp</td>

有些浏览器对没有内容的单元格显示的不太好，比如：

<table border=“1”>

  <tr>

    <td>一</td>

    <td>二</td>

  </tr>

  <tr>

    <td> &nbsp</td>

    <td>四</td>

  </tr>

</table>

结果可能是：                                                                                也可能是：

                  

为了避免出现这种情况，用<td> &nbsp</td>
代替<td></td>。

nbsp是non-breaking space(不打断的空间)，插入空格。

 

4.表格的标题，<caption>标题</caption>

例如：

<table border="1">

<caption>我的标题</caption>

<tr>

  <td>100</td>

  <td>200</td>

  <td>300</td>

</tr>

</table>

结果：

 

 

 5.跨行或跨列的表格，列colspan=“数字”，行rowspan=“数字”（column列，row行排）

注：是将几个单元格合并成一个，而不是将一个拆分成几个，将这个合并的看做最左边或最上边的那个。

格式：在<th>或<td>里加上colspan=“数字”或rowspan=“数字”

例如1：

<table border=“1”>

  <tr>

    <th colspan=“2”>电话</th>

  </tr>

  <tr>

    <td>2232 5684</td>

    <td>2958 6436</td>

  </tr>

</table>

结果：

                                                                     

 （这是th）                    （这是td）    

例如2：

<table border=“1”>

  <tr>

    <th rowspan=“2”>电话</th>

    <td>2232 5684</td>

  </tr>

  <tr>

    <td>2958 6436</td>

  </tr>

  <tr>

    <th>姓名</th>

    <td>李</td>

  </tr>

</table>

结果：

 

例如3：

<table border="1">
  <tr>
    <td colspan="7">图片</td>
  </tr>
  <tr>
    <td>新闻资讯</td>
    <td>新闻资讯</td>
    <td>新闻资讯</td>
    <td>新闻资讯</td>
    <td>新闻资讯</td>
    <td>新闻资讯</td>
    <td>新闻资讯</td>
  </tr>
  <tr>
    <td>新闻</td>
    <td colspan="3" rowspan="3"></td>
    <td colspan="3" rowspan="3"></td>
  </tr>
  <tr>
    <td>新闻</td>
  </tr>
  <tr>
    <td>新闻</td>
  </tr>
</table>

结果：

 

注：这样好理解

 

把ABCD看成abcd，

把（A - a），（B - b），（C - c），（D - d）看成没有。

代码如下：

第一行：<tr>  <td></td>*5  </tr>

第二行：

<tr>

  <td></td>

  <td colspan=”2” rowspan=”2”>这是a（A）</td>

  <td colspan=”2” rowspan=”2”>这是b（B）</td>

</tr>

第三行：<tr>  <td></td>  </tr>

第四行：

<tr>

  <td></td>

  <td colspan=”2” rowspan=”2”>这是c（C）</td>

  <td colspan=”2” rowspan=”2”>这是d（D）</td>

</tr>

第五行：<tr>  <td></td>  </tr>

6.单元格边距cellpadding，即边沿与内容之间留白距离，默认为0。

注：从实用角度出发，最好不要规定 cellpadding，而是使用CSS来添加内边距。

格式：<table border=“1”cellpadding=“10”>

结果：

 

 

7.单元格间距cellspacing，即边沿与边沿之间留白距离，默认为0。

格式：<table border=“1”cellspacing=“10”>

结果：

 

 

8.向表格添加背景颜色和背景图像

格式：

<table border=“1”style="background-color:red;">

<table border=“1”background="/i/eg_bg_07.gif">

结果：

 

 

9.表格中的对齐

格式：

<table width="400" border="1">

  <tr>

    <th align="left">消费项目....</th>

    <th align="right">一月</th>

    <th align="right">二月</th>

  </tr>

 ·······

</table>

结果：

 

 

10.框架属性<frame>，控制围绕表格的边框。

格式：<table border=“1”frame=“box或above或below或hsides或vsides”>

结果：

 

注：frame属性无法在Internet explorer（简称IE）中正确显示