day 5 表格

最新推荐文章于 2024-07-26 15:05:55 发布

banana tree

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量280

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/lemon_shinning/article/details/124351577

版权

表格table

table标签用来定义表格，表格包含在<table></table>中。表格的标签还有tr（定义表格中的一个行）每个表格可以有多个行，行里边也可以有多个td（用来定义单元格），也可以有多个th（表头）。

table	表格
tr	表格行
th	表头
td	单元格

单元格合并

colspan	横向合并，从哪一行合并就在哪一行给这个属性，然后合并，最后删除
rowspan	纵向合并，和横向合并道理一样

表格css重置

直接给table边框属性（border="1"）会出现很多个小方格，去除间隙用border-collapse:collapse;

重置单元格默认样式:th,td{padding:0;}。

练习

<!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>tale</title>
    <style>
        table{
            border-collapse: collapse;
            text-align: center;
            margin-top: 10px;
            border-color: rgb(83, 136, 158);
        }
        th{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="3">日期</th>
            <th colspan="3">天气现象</th>
            <th>气温</th>
            <th>风向</th>
            <th>风力</th>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">22日星期五</td>
            <td>白天</td>
            <td>太阳</td>
            <td colspan="2" >晴间多云</td>
            <td>高温7度</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
        <tr>
            <td>夜间</td>
            <td>月亮</td>
            <td colspan="2">晴</td>
            <td>低温-4度</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
    </table>
    <table border="1">
        <tr>
            <td colspan="2" rowspan="2">23日星期六</td>
            <td>白天</td>
            <td>太阳</td>
            <td colspan="2" >晴间多云</td>
            <td>高温9度</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
        <tr>
            <td>夜间</td>
            <td>月亮</td>
            <td colspan="2">晴</td>
            <td>低温-2度</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
    </table>
</body>
</html>

banana tree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day 5 表格

表格tabletable标签用来定义表格，表格包含在<table></table>中。表格的标签还有tr（定义表格中的一个行）每个表格可以有多个行，行里边也可以有多个td（用来定义单元格），也可以有多个th（表头）。table 表格 tr 表格行 th 表头 td 单元格单元格合并colspan 横向合并，从哪一行合并就在哪一行给这个属性，然后合并，最后删除 rowspan 纵向合并，和横向合并道理一样表格c
复制链接

扫一扫