HTML5表格详细教程

顺晟科技

2022-09-15 19:24:25

HTML5表格详细教程

HTML5表格

文章目录

HTML5表格
- 5.1 定义表格
- - 5.1.1 普通表格、列标题
  - 5.1.2 表格标题
  - 5.1.3 表格行分组、表格列分组
- 5.2 表格属性
- - 5.2.1 单线表格、分离单元格
  - 5.2.2 细线边框
- 5.3 单元格属性
- - 5.3.1 跨单元格显示、表头单元格
  - 5.3.2 绑定表头、信息缩写
  - 5.3.3 单元格分类
- 5.4 项目实战
- - 5.4.2 设计产品信息列表

5.1 定义表格

5.1.1 普通表格、列标题

普通表格
一个< table >元素，以及一个或多个 tr 和 td 组成，tr 定义行，td 定义行内单元格。

<table>
    <tr>
        <td>月落乌啼霜满天，</td>
        <td>江枫渔火对愁眠。</td>
    </tr>
    <tr>
        <td>姑苏城外寒山寺，</td>
        <td>夜半钟声到客船。</td>
    </tr>
</table>

列标题
在数据表格中，每列应该包含一个标题。在数据库中这个标题称为字段，在HTML中被称为表头单元格。使用 th 元素定义表头单元格。
默认状态下，th 内文本呈现为居中、粗体显示，而td 内文本为左对齐的普通文本。

<!doctype html>
<table>
    <tr>
        <th>用户名</th>
        <th>电子邮箱</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>zhangsan@163.com</td>
    </tr>
</table>

<table>
    <tr>
        <th>&nbsp;</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <th>第1节</th>
        <td>语文</td>
        <td>物理</td>
        <td>数学</td>
        <td>语文</td>
        <td>美术</td>
    </tr>
    <tr>
        <th>第2节</th>
        <td>数学</td>
        <td>语文</td>
        <td>体育</td>
        <td>英语</td>
        <td>音乐</td>
    </tr>
    <tr>
        <th>第3节</th>
        <td>语文</td>
        <td>体育</td>
        <td>数学</td>
        <td>英语</td>
        <td>地理</td>
    </tr>
    <tr>
        <th>第4节</th>
        <td>地理</td

上一篇：HTML5与CSS3知识点总结下一篇：使用爬虫-lxml解析html数据

网站建设

Html

HTML5表格详细教程

HTML5表格详细教程

HTML5表格

文章目录

5.1 定义表格

5.1.1 普通表格、列标题