第二章

一·HTML表格

<table> 表格
<tr> 行
<td> 单元格

1.基本语法与结构

<table>   <!--表格开始-->
    <tr>     <!--tr行标签-->
        <td>......</td>    <!--td单元格-->
        ......
    </tr>
    <tr>    
        <td>......</td>    
        ......
    </tr>
</table>    <!--表格结束-->

属性： eg:<table border="1" >

2.带表头和标题的表格

<table>   <!--表格开始-->
    <caption>...</caption>    <!--表格标题，居中显示>
    <tr>     <!--tr行标签-->
        <th>......</th>    <!--表格头，内容居中，加粗显示-->
        ......
    </tr>
    <tr>    
        <td>......</td>    
        ......
    </tr>
</table>    <!--表格结束-->

3.带结构的表格

表格划分为三部分：表头，主体，脚注

thead:表格的头（放标题之类的内容）
tbody:表格的主体（放数据主体）

tfood:表格的脚（放表格的脚注）

  <table>   
      <caption>...</caption>  
      <thead>
          <tr>     
              <th>表头</th>    
           </tr>
      </thead>
      <tbody>
          <tr>    
              <td>主体</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>    
              <td>主体</td>
           </tr>
      </tfoot>
  </table>

注：<thead>：<tbody>：<tfoot>标签不能影响布局，对表的结构进行了划分，加载时可分块加载。

二·表格属性

<table>表格属性

属性	值	描述
Width	Pixels、%	规定整个表格的宽度
align	Left、center、right	表格相对周围元素的对齐方式
border	pixels	规定表格边框的宽度
bgcolor	rgb(xxx)、#xxxxxx、colorname	表格的背景颜色
cellpadding	pixels、%	单元边沿其内容之间的空白
cellspacing	pixels、%	单元格之间的空白
frame	属性值	规定外侧边框的哪个部分是可见的
rules	属性值	规定内侧边框的哪个部分是可见的

外边框 frame属性

值	描述
void	不显示万册边框
above	显示上部的外侧边框
below	显示下部的外侧边框
hsides	显示上部和下部的外侧边框
vsides	显示左边和右边的外侧边框
lhs	显示左边的外侧边框
rhs	显示右边的外侧边框
box	在所有四个边上显示外侧边框
border	在所有四个边上显示外侧边框

内边框 rules属性

值	描述
none	没有线条
proups	位于行组和列组之间的线条
rows	位于行之间的线条
cols	位于列之间的线条
all	位于行和列之间的线条

<tr>标签属性

属性	值	描述
align	left,center,right,justify,char	行内容的水平对齐
valign	top,middle,bottom,baseline	行内容的垂直对齐
bgcolor	.rgb(xxx) 、 .#xxxxxx、.colorname	行的背景颜色

注：
colorname:规定颜色值为颜色名称的字体颜色

#xxxxxx :规定颜色值为十六进制值的字体颜色

#rgb(x,x,x)规定颜色值为rgb代码的字体颜色

<td>和<th>标签属性

属性	值	描述
align	left,center,right,justify,char	单元格内容的水平对齐
valign	top,middle,bottom,baseline	单元格内容的垂直对齐
bgcolor	.rgb(xxx) 、 .#xxxxxx、.colorname	单元格的背景颜色
Width	Pixels、%	单元格的宽度
height	Pixels、%	单元格的高度

<thead><tbody>和<tfoot>标签属性

属性	值	描述
align	left,center,right,justify,char	<thead><tbody>和<tfoot>标签属性内容的水平对齐
valign	top,middle,bottom,baseline	<thead><tbody>和<tfoot>标签属性内容的垂直对齐

跨列属性colspan

<table>   
    <tr>     
        <td  colspan= "跨列的数值">......</td>    
        <td>......</td>    
    </tr>
    <tr>    
        <td>......</td>    
        <td>......</td>    
        <td>......</td>    
    </tr>
</table>

表示从第一行第一个单元格开始跨列，要删除第一行第二列的单元格

跨行属性rowspan

<table>   
    <tr>    
        <td>......</td>    
        <td  rowspan= "跨行的数值">......</td>    
        <td>......</td>    
    </tr>
    <tr>    
        <td>......</td>    
        <td>......</td>    
    </tr>
</table>

表示从第一行的第二个单元格开始跨行，要删除第二行第二个单元格

表格嵌套

<table>   
    <tr>     
        <td>......</td> 
        <td>
             <table>
                 <tr>    
                     <td>......</td>    
                     <td>......</td>    
                 </tr>
              </table>  
        </td>    
    </tr>
    <tr>    
        <td>......</td>    
        <td>......</td>    
        ...... 
    </tr>
</table>

说明：

1. 嵌入的表格要是一个完整的结构

2. 放到<>标签中