表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例

程序员shy

已于 2022-03-02 15:43:47 修改

阅读量425

点赞数

分类专栏：《HTML5+CSS3》第一站文章标签： html5

于 2022-02-27 21:06:43 首次发布

本文链接：https://blog.csdn.net/Junyi727/article/details/123162002

版权

本文详细介绍了HTML5中的表格标签，包括表格的创建、表头标签、合并单元格的方法。同时，文章讲解了无序列表、有序列表和自定义列表的用法。还探讨了表单标签，解析了表单域、表单控件及其属性，并通过注册页面案例展示了实际应用。

摘要由CSDN通过智能技术生成

表格标签

表格主要用于展示数据

<table>
    <tr>
        <td>单元格内的文字</td>
            ...
    </tr>
        ...
</table>

1.<table> </table> 是用于定义表格的标签。

2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。

3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4.字母 td 指表格数据（table data），即数据单元格的内容。

height 像素值或百分比规定表格的高度

表头标签

<table>
    <tr>
        <th>单元格内的文字</th>
            ...
    </tr>
        ...
</table>

表头单元格内的文本会加粗居中

<thead></thead>，<tbody></tbody>标签

1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签

2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体

能够让表格的结构更加的清晰

<table>
<thead>
    <tr>
        <th>单元格内的文字</th>
            ...
</thead>
<tbody>
    </tr>
        ...
</tbody>
</table>

今日小说排行榜案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" cellpadding="0" cellspacing="0" border="1">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="https://img2.baidu.com/it/u=1267784173,803507452&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260" /></td>
            <td>666</td>
            <td>66666</td>
            <td><a href="http://www.baidu.com">百度搜索</a></td>
        </tr>
    </table>
</body>
</html>