【任务3】HTML--化繁为简的表(表格、列表)

最新推荐文章于 2024-08-16 19:02:09 发布

瞅啥11

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量214

点赞数 3

文章标签： javascript 开发语言 ecmascript 编辑器 vscode 大数据前端

本文链接：https://blog.csdn.net/2301_81688709/article/details/137404186

版权

一、作用

表格（展示数据）
列表（布局）

二、表格列表总结

三、学生案例

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- table常用属性：align为对齐方式;border规定是否拥有边框("1"有；""无)width为表格宽度,height为表格高度 ，
        cellpadding="0"(单元格内容与边框的距离为0) cellspacing="0"(单元格边框与单元格的距离为0) -->
    <table align="center" border="1" width="200" height="151" cellpadding="0" cellspacing="0">
        <!-- caption为表格整体大标签-->
        <caption>表格</caption>
        <thead>
            <tr>
                <th>姓名</th> <!-- <th></th>为表头单元格标签 -->
                <th>性别</th>
                <th>年龄</th>
                <th>学号</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小新</td>
                <td>男</td>
                <td>3</td>
                <td>01</td>
                <td>100</td>
            </tr>
            <tr>
                <td>图图</td>
                <td>男</td>
                <td>4</td>
                <td>02</td>
                <td>99</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <!-- colspan="跨列合并单元格个数"
                rowspan="跨行合并单元格个数" -->
                <td colspan="4">总成绩</td>
                <td>199</td>
            </tr>
        </tfoot>
    </table>
    <!-- 以上为表格内容 -->
    <hr>

    <!-- 声明无序列表 -->
    <h3>你最爱吃的食物是神马</h3>
    <ul>
        <li>榴莲</li>
        <li>芒果</li>
        <li>荔枝</li>
        <li>
            <p>123</p>
            <!-- ul标签内只能放li标签，不能直接放p标签，但li标签内可以放任何元素 -->
        </li>
    </ul>

    <!-- 声明有序列表 -->
    <h3>你最喜欢哪一门科目</h3>
    <ol>
        <li>数学</li>
        <li>英语</li>
        <li>思政</li>
        <li>体育</li>
        <li>
            <p>123</p>
            <!-- ol标签内只能放li标签，不能直接放p标签，但li标签内可以放任何元素 -->
        </li>
    </ol>
    <!-- 声明自定义列表 -->
    <h3>关注我吧</h3>
    <dl>
        <dt>原因</dt>
        <dd>可爱</dd>
        <dd>迷人</dd>
        <dd>善良</dd>
        <!-- dl标签内只能放dt,dd标签 -->
    </dl>
</body>

</html>

效果图