【前端】【HTML笔记】之基础知识梳理（三）—— 列表与表格

Oct.S

已于 2023-01-13 14:54:19 修改

阅读量338

点赞数

分类专栏：笔记文章标签：前端 html

于 2023-01-13 14:29:55 首次发布

本文链接：https://blog.youkuaiyun.com/HY_Sophie/article/details/128673813

版权

笔记专栏收录该内容

14 篇文章

订阅专栏

五、列表

5.1 无序列表

无序列表适合一组相关信息按照列表展示，如：新闻列表、文章列表、导航条、商品列表等

<ul>
        <li>食品</li>
        <li>服饰</li>
        <li>数码</li>
</ul>

5.2 有序列表

有序列表适合一组有顺序的相关信息按照列表展示，如排行榜类

<ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
</ol>

5.3 定义列表

<dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
        <dd>浏览器端脚本语言</dd>
</dl>

六、表格

6.1 表格的结构

<table>

        <!-- 表格标题 -->
        <caption>标题</caption>

        <!-- 表格的页眉(/头) -->
        <thead>
            <!-- 表格的行 -->
            <tr>
                <!-- 表格单元 -->
                <th></th>
                <td></td>
                <td></td>
            </tr>
        </thead>

        <!-- 表格的主体 -->
        <tbody>
            <!-- 表格的行 -->
            <tr>
                <!-- 表格单元 -->
                <th></th>
                <td></td>
                <td></td>
            </tr>
        </tbody>

        <!-- 表格的页脚 -->
        <tfoot>
            <!-- 表格的行 -->
            <tr>
                <!-- 表格单元 -->
                <th></th>
                <td></td>
                <td></td>
            </tr>
        </tfoot>

</table>

自上而下分别为：caption、thead、tbody、tfoot

HTML 表格 | 菜鸟教程

6.2 表格的样式

① 表格整体的样式

table元素属性：width（宽度）、height（高度）、cellspacing（单元格间距）菜鸟教程在线编辑器、cellpadding（单元格边距-单元格边框与单元格内容之间的距离）菜鸟教程在线编辑器

② 单元格样式

Ⅰ. align 与 valign：

align（水平对齐）：left（居左）、center（居中）、right（居右）

valign（垂直对齐）：top（居上）、middle（居中）、bottom（居下）

Ⅱ. 跨行与跨列：

rowspan（跨行）、colspan（跨列）菜鸟教程在线编辑器

实际应用：前端初学者之HTML中应用表格制作简历、课程表（含跨行跨列）代码实操并附结果图_HY_Sophie的博客-优快云博客

a. thead tbody tfoot tr th td 均具有 align（水平对齐）与 valign（垂直对齐）属性；

b. tr 还具有 height（高度）属性；th td 还具有 width（宽度）、height（高度）、rowspan（跨行）、colspan（跨列）

6.3 表格标签总结

标签名	功能和语义	属性	单标签还是双标签
table	表格包裹元素	width height cellspacing cellpadding border	双
caption	表格标题		双
thead	表格页眉	align valign	双
tbody	表格主体	align valign	双
tfoot	表格页脚	align valign	双
tr	表格的行	align valign height	双
th	表头单元格	align valign width height rowspan colspan	双
td	单元格	align valign width height rowspan colspan	双