html 表格

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`	不限	设置高度

1.2 表格实列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead></thead><!--这是表格头部-->
      <tbody></tbody><!--这是表格主体-->
      <tfoot></tfoot><!--这是表格底部-->
    </table>
    <table
      border="1" 
      cellpadding="5"
      cellspacing="0"
      width="500"
      height="300"
      align="center"
    ><!--border：边框，cellpadding:内边距，cellspacing：间隙，width：宽度，height:高度align：内容排列左中右-->
      <!-- 对列统一设置,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;text-align: left;">
        员工信息表
      </caption>
      <!-- 表格页眉 -->
      <thead bgcolor="lightblue"><!--bgcolor 设置背景颜色-->
        <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>
  </body>
</html>

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

0403作业 — html表格

2020-04-03 23:10:07