九、表格标签

225 阅读2分钟

九、表格标签

一、表格的基本标签

场景:在网页中以行+列的单元格的方式整齐展示数据

基本标签:

标签名说明
table表格整体,可用于包裹多个tr
tr表格每行,可用于包裹td
td表格单元格,可用于包裹内容

标签的嵌套关系:table>tr>td

340922_200321028958_2.jpg

二、表格相关属性

场景:用于设定表格基本的展示效果

常见相关属性:

属性名属性值效果
border数字 颜色边框宽度、颜色
width/hight数字表格的宽高

例:

   <table>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>*</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>-</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>+</td>
        </tr>
   
    </table>
table,td{
    border: 1px solid black;
    /* 边框线 */
}
table td{
    /* 宽高 */
    height: 50px;
    width: 50px;
    /* 水平垂直对齐 */
    text-align: center;
    line-height: 50px;
    /* 字体大小 */
    font-size: 25px;
}
td{
    width: 50px;
    height: 50px;
    text-align: center;
}

显示效果:

340922_20032102895888_2.jpg

三、表格标题和表头单元格标签

场景:在表格中表达整体大小标题和一列小标题

基本标签:

标签名名称说明
caption表格大标题表示表格整体大标题,默认在表格整体顶部居中位置显示
th表头单元格表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

注意事项:

*caption标签书写在table标签内部;

*th标签书写在tr标签内部(用于替换td标签);

例:

    <table>
        <caption>学生成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>张凡</td>
            <td>武艺</td>
            <td>70分</td>
        </tr>
        <tr>
            <td>林羽</td>
            <td>武艺</td>
            <td>90分</td>
        </tr>
    </table>
​

效果显示:

340922_20032102895888_2555.jpg

四、表格的结构标签

场景:让表哥的内容结构分组,突出表现的不同部分(头部、主体、底部),使语义更加清晰。

标签结构:

标签名名称
thead表格头部
tbody表格主体
tfoot表格底部

注意事项:

*表格结构标签内部用于包裹tr标签;

*此标签可以省略。

例:

 <table>
      <thead>  
            <caption>学生成绩单</caption>
      </thead>
      <tbody>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>张凡</td>
            <td>武艺</td>
            <td>70分</td>
        </tr>
        <tr>
            <td>林羽</td>
            <td>武艺</td>
            <td>90分</td>
        </tr>
    </tbody>
  </table>
​

五、合并单元格

场景:将水平或垂直多个单元格合并成一个单元格

合并单元格步骤:

1.明确合并那几个单元格;

2.通过左上原则,确定谁保留谁删除{

*上下合并只留最上面的,其他删除;

*左右合并只留最左边的,其他删除;}

3.给保留的单元格设置合并属性:

属性名属性值说明
rowspan合并单元格的个数跨行合并,将多行单元格垂直合并
colspan合并单元格的个数跨列合并,将多列单元格水平合并

4.注意事项:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)

例(计算机):

  <table>
        <tr>
            <td colspan="4" class="z1"> 1234</td>
        </tr>
        <tr>
            <td>ac</td>
            <td>+/-</td>
            <td>%</td>
            <td>/</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>*</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>-</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>+</td>
        </tr>
        <tr>
            <td colspan="2">0</td>
            <td>.</td>
            <td>=</td>
        </tr>
    </table>

显示: 340922_200321028958_222.jpg