表格元素

1. 简介

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

2.常用标签

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

3.表格中的行与列的合并

跨行：

 rowspan=""

跨列：

colspan=""

代码：

<!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" width="600" height="200" cellspacing="0" cellpadding="5" align="center">
        <caption style="font-size: 1.5rem; margin-bottom: 10px">
        用户订单表
      </caption>
        <thead>
            <th colspan="2">用户信息</th>
            <th colspan="3">订单信息</th>
            <th colspan="4">地址信息</th>
        </thead>
        <tbody>
            <tr>
                <td>姓名</td>
                <td>手机号</td>
                <td>订单号</td>
                <td>日期</td>
                <td>金额</td>
                <td>省</td>
                <td>市</td>
                <td>区</td>
                <td>详细地址</td>
            </tr>
            <tr>
                <td rowspan="4">张三</td>
                <td>12345678910</td>
                <td>202010101234</td>
                <td>2020-10-10</td>
                <td>635.00</td>
                <td>广东省</td>
                <td>深圳市</td>
                <td>龙岗区</td>
                <td>西瓜大道123号</td>
            </tr>
            <tr>
                <td>12322318910</td>
                <td>202010105987</td>
                <td>2020-10-10</td>
                <td>5135.00</td>
                <td>广东省</td>
                <td>韶关市</td>
                <td>乐昌市</td>
                <td>西瓜大道123号</td>
            </tr>
            <tr>
                <td>12346952910</td>
                <td>202010102256</td>
                <td>2020-10-10</td>
                <td>6352.00</td>
                <td>广东省</td>
                <td>广州市</td>
                <td>海珠区</td>
                <td>西瓜大道123号</td>
            </tr>
            <tr>
                <td>12315423910</td>
                <td>202010101542</td>
                <td>2020-10-10</td>
                <td>946.00</td>
                <td>广东省</td>
                <td>佛山市</td>
                <td>龙岗区</td>
                <td>西瓜大道123号</td>
            </tr>
        </tbody>
    </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

redis

2020-10-13 14:19:17