0
点赞
收藏
分享

微信扫一扫

html 表格

<!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>

    <!-- demo1 -->
    <h6>案例1</h6>
    <!-- 表格容器标签 -->
    <table>
        <tr>
            <!-- td对应的是列 -->
            <td>不该</td>           
            <td>喜欢你</td>
        </tr>
        <!-- tr对应的是行 -->
        <tr>
            <td>11</td>
        </tr>
        <tr>
            <td>22</td>
        </tr>
    </table>

    <!-- demo2 -->
    <h6>案例2</h6>

    <!-- 表格的属性 -->
    <!-- border 边框的粗细 -->
    <!-- width 边框的宽度 -->
    <!-- hight 边框的高度 -->
    <table border="5" width="100px" hight="100px">
        <tr>
            <!-- td对应的是列 -->
            <td>不该</td>           
            <td>喜欢你</td>
        </tr>
        <!-- tr对应的是行 -->
        <tr>
            <td>11</td>
        </tr>
        <tr>
            <td>22</td>
        </tr>
    </table>


</body>
</html>

demo

<!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>
    <style>
        h6{
            text-align: center;
        }
        table{
            text-align: center;
        }
    </style>
</head>
<body>
    <h6>课程表</h6>
    <table border="2" width="400px" hight="200px">
        <tr>
            <td>项目</td>
            <!-- 水平合并 -->
            <!-- 水平合并保留左边,删除右边 -->
            <!-- 合计 -->
            <td colspan="5">上课</td>
            
            <td colspan="2">休息</td>
            
        </tr>
        <tr>
            <td>星期</td>
            <td>星期1</td>
            <td>星期2</td>
            <td>星期3</td>
            <td>星期4</td>
            <td>星期5</td>
            <td>星期6</td>
            <td>星期日</td>
        </tr>
        <tr>
            <!-- 垂直居中 -->
            <!-- 垂直居中保留上边,删除下边 -->
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
        </tr>
    </table>
</body>
</html>

1.表格的标签有哪些

2.表格的粗细,宽高

3.表格的合并单元格

举报

相关推荐

HTML表格

html表格

HTML - html 表格(二)

HTML--表格

HTML|表格标签

Html制作表格

html表格table

0 条评论