H5基础第三课时（3）

1.转义字符
   (1)版权符号： ©
   (2)左尖括号： <
   (3)右尖括号：>
   (4)斜线：⁄

在页面显示 <u>下划线</u>:

      &lt;u&gt;下划线&lt;&frasl;u&gt;


2.表格 table
<table>
<caption> </caption>表格头
   <tr>
      <th></th>表头 默认加粗，单元格居中
   </tr>
  <tr> 行
    <td></td> 列
  </tr>
</table>

(1)table 常用属性：
    1.border：给表格添加边框。
        当border属性增大的时候，只有外围边框线增加，单元格边框始终为1px。
    2.bordercolor="blue" 边框颜色。
    3.width、height：表格宽高。
    4.cellspacing：单元格与单元格之间的间隙距离。
        当cellspacing="0"只会使单元格间隙为0，但不会合并边线框。
        表格边框合并：14:39 2017/3/22，无需
        再写cellspacing="0"。
    5.cellpadding：每个单元格中的内容与边线框的距离。
    6.align：表格在屏幕的左中右显示 left center right
        注意：给表格加上align属性，相当于让表格浮动。
        会直接打破表格后面元素的原有排列方式
    7.bgcolor：背景色 等同于style="background-color: "
    8.background：backgroud="img/图片名称"设置背景图片
        等同于style="background-image:url('')" 背景图片会覆盖背景颜色


(2)tr和td 相关属性
    1.width/height：单元格宽度/高度。
    2.bgcolor：单元格背景颜色。
    3.align：left center right 单元格中的文字，水平对齐方式
    4.valign：top center bottom 单元格中的文字 垂直对齐方式
    5.nowrap="nowrap"单元格中文字不换行。
    6.colspan：合并列
    7.rowspan：合并行
       注意：1. 当表格属性与行属性冲突时，以行列属性为准。（近者优先，就近原则）
           2. 表格的align属性，是控制表格自身在浏览器的显示位置；
             行和列的align属性，是控制单元格中文字的对齐方式。
           3. 表格的align属性并不影响表格内，文字的水平对齐方式
             tr的align或者valign属性，可以控制一行中所以的单元格的水平或者垂直对齐方式

<table table border="1"  bordercolor="blue" cellpadding="10px" cellspacing="0" width="500px" height="150px"
style="border-collapse: collapse;background-color: yellow;"align="center" >
      <tr bgcolor="red " align="center" valign="top">
          <td bgcolor="blue" align="left">第一行第一列</td>
          <td colspan="3">第一行跨三列</td>
      </tr>
      <tr >
          <td rowspan="3" bgcolor="#7fff00">第二行跨三行</td>
          <td>第二行</td>
          <td>第二行</td>
          <td>第二行</td>
      </tr>
      <tr>
          <td>第三行</td>
          <td>第三行</td>
          <td>第三行</td>
      </tr>
      <tr>
          <td>第四行</td>
          <td>第四行</td>
          <td>第四行</td>
      </tr>

  </table>

(3)colgroup:前两列为一组

  thead:表头 

  tbody：标签表格主体（正文）

  tfoot:表尾

  <colgroup style="background-color: red;"> 
        <col/> <!--第一列-->
        <col/> <!--第二列-->
    </colgroup>
    <col style="background-color: blue;"/> <!--第三列-->


    <caption>表格标题</caption>


    <thead>
    <tr>
        <th>头1</th>
        <th>头2</th>
        <th>头3</th>
    </tr>
    </thead>


    <tbody>
    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    </tbody>


    <tbody>
    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    </tbody>


    <tfoot>
    <tr>
        <td>尾1</td>
        <td>尾2</td>
        <td>尾3</td>
    </tr>
    </tfoot>


</table>