列表与表格基础

小小小小小阿玲

已于 2023-07-30 20:36:12 修改

阅读量41

点赞数

文章标签：前端笔记 html

于 2023-07-30 20:35:08 首次发布

本文链接：https://blog.csdn.net/weixin_52874247/article/details/132000245

版权

本文详细介绍了HTML中的列表类型，包括有序列表、无序列表和自定义列表，并给出了示例代码及其效果。同时，文章还深入讲解了表格的组成，如表格标题、头部、主体和脚注，以及相关标签如tr、th、td的使用，强调了各种属性的设置方法和注意事项，特别是边框控制和单元格的合并。

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

一、列表

1、分类

（1）有序列表

（2）无序列表

（3）自定义列表

2、举例

    <!-- 有序列表 -->
    <ol>
        <li>买菜</li>
        <li>做饭</li>
        <li>吃饭</li>
    </ol>

    <!-- 无序列表 -->
    <ul>
        <li>打游戏</li>
        <li>刷视频</li>
        <li>看书</li>
    </ul>

    <!-- 自定义列表 -->
    <dl>
        <dt>多喝水</dt>
        <dd>多喝水能排除我们人体内的毒素</dd>
        <dt>多吃水果</dt>
        <dd>多吃一些水果，可以补充维生素</dd>
        <dt>勤锻炼</dt>
        <dd>多多锻炼，可以增强我们的体质</dd>
    </dl>

3、效果

4、注意

（1）列表可以嵌套

    <ul>
        <li>
            <span>打游戏</span>
            <ul>
                <li>
                    <span>王者荣耀</span>
                    <ul>
                        <li>走中路</li>
                        <li>走发育路</li>
                        <li>走对抗路</li>
                    </ul>
                </li>
                <li>英雄联盟</li>
                <li>蛋仔派对</li>
            </ul>
        </li>
        <li>刷视频</li>
        <li>看书</li>
    </ul>

（2）效果

二、表格（table）

1、组成

（1）表格标题（caption）

（2）表格头部（thead）

（3）表格主体（tbody）

（4）表格脚注（tfoot，可不写）

2、其他标签

tr ：每行

th、td ：每个单元格（表格头部中使用th，表格主体、表格脚注中使用td）

3、常用属性

（1）<table>的常用属性有

width：设置表格宽度

height：设置表格最小高度，表格最终高度可能比设置的值大

border：设置表格边框宽度

cellspacing：设置单元格之间的间距

（2）thead

height：设置表格头部高度

align：设置单元格的水平对齐方式，属性值有left、center、right（默认center）

valign：设置单元格的垂直对齐方式，属性值有top、middle、bottom（默认middle）

（3）tbody

常用属性和thead相同

（4）tr

常用属性和thead相同

（5）tfoot

常用属性和thead相同

（6）th

width：设置单元格的宽度，同列所有单元格全都受影响

heigth：设置单元格的高度，同行所有单元格全都受影响

align

valign

rowspan：指定要垮的行数

colspan：指定要跨的列数

（7）td

常用属性和th相同

4、注意

<table>元素的border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，如要控制单元格边框的宽度，需要css

5、代码及效果

（1）代码

    <table border="1" width="400" height="200" cellspacing="0">
        <!-- 表格标题 -->
        <caption>学生信息</caption>
        <!-- 表格头部 -->
        <thead height="50" align="center" valign="middle">
            <tr height="50" align="center" valign="middle">
                <th width="100" height="40" align="left" valign="bottom">姓名</th>
                <th>学号</th>
                <th>班级</th>
                <th>专业</th>
                <th>值日时间</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody height="50" align="center" valign="middle">
            <tr height="50" align="center" valign="middle">
                <td width="100" height="50" align="right" valign="top">张三</td>
                <td>111</td>
                <td>2班</td>
                <td>软工</td>
                <td rowspan="2">周一</td>
            </tr>
            <tr height="50" align="center" valign="middle">
                <td>李四</td>
                <td>222</td>
                <td>1班</td>
                <td>网工</td>
            </tr>
            <tr height="50" align="center" valign="middle">
                <td>王五</td>
                <td>333</td>
                <td>3班</td>
                <td>计科</td>
                <td rowspan="2">周二</td>
            </tr>
            <tr height="50" align="center" valign="middle">
                <td>赵六</td>
                <td>444</td>
                <td>4班</td>
                <td>大数据</td>
            </tr>
        </tbody>
        <!-- 表格脚注 -->
        <tfoot height="50" align="center" valign="middle">
            <tr>
                <td colspan="5">共计：4人</td>
            </tr>
        </tfoot>
    </table>

（2）效果