网页设计练习

最新推荐文章于 2024-11-12 10:23:07 发布

a1833919188

最新推荐文章于 2024-11-12 10:23:07 发布

阅读量37

点赞数

文章标签： html

本文链接：https://blog.csdn.net/a1833919188/article/details/134278198

版权

11.7号第六章表格

基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本表格结构</title>
    <!--这里使用Scc为表格加上边框-->
    <style type="text/css">
        table,tr,td{border:1px solid silver}
    </style>
</head>
<body>
    <table>
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>jQuery</td>
        </tr>
    </table>
</body>
</html>

表头单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table,tr,td{border: 1px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>英语</th>
            <th>英语</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

合并行列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并行列</title>
    <style type="text/css">
        table,tr,td{border: 1px solid silver;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td rowspan="3">1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="3">4</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>