DevOps HTML

staceywithyou · November 10, 2019 · 7 hits

HTML 表格主要由以下标签组成:

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性

代码演示如下:

12345678910111213141516171819
<table border="1" width="50%">    <caption>前端工程师平均工资</caption>
    <tr>
        <th>城市</th> <th>2014</th> <th>2014</th> <th>2015</th> <th>2016</th>
    </tr>
    <tr>
        <th>城市</th> <th>上半年</th> <th>下半年</th> <th>2015</th> <th>2016</th>
    </tr>
    <tr>
        <td>北京</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
    </tr>
    <tr>
        <td>上海</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
    </tr>
    <tr>
        <td>合计</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
    </tr>
</table>

表格结构标签

在 HTML 中,表格的加载时完成后再显示,当表格的内容和结构比较复杂时,这会影响页面打开的速度。这种情况需要借助表格的结构进行优化,通过结构的划分,表格可以分几次加载和显示。

结构 描述
<thead> 定义表格的页眉,主要用于放标题之类的内容
<tbody> 定义表格的主体,主要用于存放数据主体
<tfoot> 定义表格的页脚,主要用于存放表格的脚注

<thead> <tbody> <tfoot> 永远是依次展示,和代码的顺序无关,其常用属性如下:

属性 描述
align left、center、right、justify、char 单元格内容水平对齐
valign top、middle、bottom、baseline 单元格内容垂直对齐

代码演示如下:

12345678910111213141516171819202122232425
<table border="1" width="50%">    <caption>前端工程师平均工资</caption>
    <thead>
        <tr>
            <th>城市</th> <th>2014</th> <th>2014</th> <th>2015</th> <th>2016</th>
        </tr>
        <tr>
            <th>城市</th> <th>上半年</th> <th>下半年</th> <th>2015</th> <th>2016</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>北京</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
        <tr>
            <td>上海</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合计</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
    </tfoot>
</table>

table 常用属性

HTML-Table-属性

属性 描述
border 像素和百分比 表格边框的宽度
width 像素 表格宽度,支持像素和百分比
align right、left、center 表格对齐方式
bgcolor RGB、Hex、英文名 表格背景颜色
cell-padding 像素和百分比 单元格内边距
cell-spacing 像素和百分比 单元格外边距
frame 属性值 表格外边框显示方式
rules 属性值 表格内边框显示方式
描述
void 不显示外侧边框。
above 显示上部的外侧边框。
below 显示下部的外侧边框。
hsides 显示上部和下部的外侧边框。
vsides 显示左边和右边的外侧边框。
lhs 显示左边的外侧边框。
rhs 显示右边的外侧边框。
box 在所有四个边上显示外侧边框。
border 在所有四个边上显示外侧边框。

frame 属性有以下几个值:

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

rules 属性有以下几个值:

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

tr 常用属性

属性 描述
align left、center、right、justify、char 行内容水平对齐
valign top、middle、bottom、baseline 行内容垂直对齐
bgcolor RGB、Hex、英文名 行的颜色

colspan rowspan 跨行跨列

123456789101112131415161718
<table bgcolor="pink" cellpadding="10" rules="rows" width="500" frame="vsides" border="1">    <thead>
        <tr>
            <th colspan="2">1</th> <th>2</th> <th>3</th> <th>4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
        <tr>
            <td rowspan="2">data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
        <tr>
            <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
    </tbody>
</table>

使用 <colspan> <rowspan> 时,需特别注意,要去除被覆盖的单元格,否则会造成单元格数量错误。

表格嵌套

当表结构很复杂时,有时会用到表格的嵌套,表格嵌套需有完整的表格结构,且必须在 <td> 标签内。

1234567891011121314151617181920212223
<table border="1"s cellspacing="0">    <tr>
        <td>2014</td>
        <td>2014</td>
        <td>2014</td>
    </tr>
    <tr>
        <td>
            <table border="1" cellspacing="0">
                <tr>
                    <td>上半年</td>
                    <td>下半年</td>
                </tr>
                <tr>
                    <td>8000</td>
                    <td>9000</td>
                </tr>
            </table>
        </td>
        <td>10000</td>
        <td>12000</td>
    </tr>
</table>

表格布局

在使用表格布局时,要尽量少使用表格嵌套和跨行跨列,过多的使用会让维护成本变高。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
<html><head>   <!--网页头部内容-->
    <title>使用表格进行网页布局</title>
 <meta http-equiv="Content - Type" content="text/html" charset="utf-8"/>
</head><body>   <table width="100%" bgcolor="#f2f2f2">
     <tr height="80" bgcolor="#14191e"><!--页头-->                 <td></td>
     </tr>
      <tr height="10"><!--上空行-->
          <td></td>
     </tr>
      <tr><!--主体内容-->
         <td>
               <table align="center" width="1024">
                    <tr>
                       <td width="240" valign="top"><!--主体内容左侧-->
                          <table width="100%" cellspacing="0">
                               <tbody align="center" bgcolor="#ffffff">
                                   <tr>
                                       <td height="60">1</td>
                                  </tr>
                                  <tr>
                                       <td height="60">2</td>
                                  </tr>
                                  <tr>
                                       <td height="60">3</td>
                                  </tr>
                                  <tr>
                                       <td height="60">4</td>
                                  </tr>
                                  <tr>
                                       <td height="60">5</td>
                                  </tr>
                                  <tr>
                                       <td height="60">6</td>
                                  </tr>
                                  <tr>
                                       <td height="60">7</td>
                                  </tr>
                                  <tr>
                                       <td height="60">8</td>
                                  </tr>
                              </tbody>
                           </table>
                       </td>
                      <td width="20"><!--主体内容空隙-->
                      </td>
                      <td width="764" bgcolor="#ffffff"><!--主体内容右侧-->
                         <p>hello html</p>
                     </td>
                  </tr>
              </table>
           </td>
      </tr>
      <tr height="10"><!--下空行-->              <td></td>
     </tr>
      <tr height="150" bgcolor="#14191e"><!--页尾-->
            <td></td>
     </tr>
  </table>
</body></html>
No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.