表格与框架元素

1. 表格元素

表格是最重要的数据格式化展示重要工具, 使用频率非常高
表格的数据,存储在由行与列组成的一系列单元格
数据必须存储在单元格元素中
与列表类似, 表格也是由一系列标签来描述

1.1 元素

序号	标签	描述	备注
1	`<table>`	定义表格,	必选
2	`<tbody>`	定义表格主体, 允许定义多次	必选
3	`<tr>`	定义表格中的行,	必选
4	`<th>`	定义表格头部中的单元格,默认加粗居中	必选
5	`<td>`	定义 g 表格 e 主体与底部的的单元格	必选
6	`<caption>`	定义表格标题,	可选
7	`<thead>`	定义表格头格, 只需定义一次	可选
8	`<tfooter>`	定义表格底, 只需定义一次	可选
9	`<col>`	为一个/多个列设置属性,仅限	可选
10	`<colgroup>`	将多个`<col>`元素分组管理	可选

1.2 属性

序号	属性	适用元素	描述
1	`border`	`<table>`	添加表格框
2	`cellpadding`	`<table>`	设置单元格内边距
3	`cellspacing`	`<table>`	设置单元格边框间隙
4	`align`	不限	设置单元格内容水平居中
5	`bgcolor`	不限	设置背景色
6	`width`	不限	设置宽度
7	`height`	不限	设置高度

表格属性仅供参考,属选学内容, 推荐使用 CSS 设置表格样式

1.3 示例

运行效果图

效果图

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格元素</title>
  </head>
  <body>
    <table
      border="1"
      cellpadding="5"
      cellspacing="0"
      width="500"
      height="300"
      align="center"
    >
      <!-- 对列统一设置,colgroup中设置的属性对所有列均有效 -->
      <colgroup bgcolor="lightpink">
        <!-- 如果不想自定义某一列属性,只写元素不写属性 -->
        <col />
        <!-- 第二列个性化定制: 背景为浅绿色 -->
        <col bgcolor="lightgreen" />
        <!-- 第三列背景为黄色,并跨越2列都有效 -->
        <col bgcolor="yellow" span="2" />
        <!-- 第四列,使用第3列的样式 -->
        <col />
        <!-- 最后一列无特殊样式,采用父级样式 -->
        <col />
      </colgroup>
      <!-- 表格标题 -->
      <caption style="font-size: 1.5rem;margin-bottom: 10px;">
        员工信息表
      </caption>
      <!-- 表格页眉 -->
      <thead bgcolor="lightblue">
        <th>部门</th>
        <th>ID</th>
        <th>姓名</th>
        <th>职务</th>
        <th>手机</th>
      </thead>
      <!-- 表格主体1 -->
      <tbody>
        <tr>
          <td rowspan="3" align="center">开发部</td>
          <td>101</td>
          <td>小王</td>
          <td>主管</td>
          <td>188345****</td>
        </tr>
        <tr>
          <!-- <td>开发部</td> -->
          <td>102</td>
          <td>小张</td>
          <td>程序员</td>
          <td>158123****</td>
        </tr>
        <tr>
          <!-- <td>开发部</td> -->
          <td>103</td>
          <td>小李</td>
          <td>实习生</td>
          <td>13399*****</td>
        </tr>
      </tbody>
      <!-- 表格主体2 -->
      <tbody>
        <tr>
          <td rowspan="3" align="center">销售部</td>
          <td>104</td>
          <td>小马</td>
          <td>主管</td>
          <td>135345****</td>
        </tr>
        <tr>
          <!-- <td>开发部</td> -->
          <td>105</td>
          <td>小刘</td>
          <td>客服</td>
          <td>157123****</td>
        </tr>
        <tr>
          <!-- <td>开发部</td> -->
          <td>106</td>
          <td>小朱</td>
          <td>实习生</td>
          <td>138349*****</td>
        </tr>
      </tbody>
      <!-- 表格页脚 -->
      <tfoot>
        <tr bgcolor="wheat">
          <td align="center">备注:</td>
          <td colspan="4">所有员工离职必须提交30天提交书面申请</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

作业截图：

我制作的第一个表格
代码截图

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：很好

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML-表格与框架元素

2023-05-05 16:32:24