前端基础之表格（看这里就够了）

最新推荐文章于 2024-04-29 22:26:37 发布

小古月成

最新推荐文章于 2024-04-29 22:26:37 发布

阅读量1.9k

点赞数 1

分类专栏：前端基础文章标签： table 表格 HTML5 CSS

本文链接：https://blog.csdn.net/qq_38602121/article/details/98497834

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>
<head>
<title>前端基础之表格table</title>
<meta charset="UTF-8">
<style>
        .table{
            margin: 10px auto;
            border: 2px solid #9a35ff;
            border-collapse: collapse;
            caption-side: top;
            width: 650px;
            height: 150px;
        }
        thead{
            border: 2px solid #9a35ff;
        }
        .table2{
            border: 2px solid #ff8102;
            border-collapse: collapse;
            height: 100px;
        }
        .table1 td{
            border: 1px dotted #9a35ff;
            text-align: center;
        }
        .table2 td{
            border: 1px dotted #ff8102;
            text-align: center;
        }
        .tdht{
            color: #ff8102
        }
        .tdlt{
            color: aqua
        }
</style>
</head>

<body>
<table class="table table1" cellpadding="10px">
         <caption>天气预报</caption>
            <thead>
                <tr>
                    <th>日期</th>
                    <th colspan="3">天气预报</th>
                    <th>气温</th>
                    <th>风向</th>
                    <th>风力</th>
                </tr>
            </thead>
            <tbody> 
                <tr>
                    <td rowspan="2" style="background: #9a35ff;
                        color: seashell">23日星期六<br/>7℃~30℃</td>
                    <td>白天</td>
                    <td>?</td>
                    <td>晴</td>
                    <td class="tdht">高温30℃</td>
                    <td>无持续风向</td>
                    <td>微风</td>
                </tr>
                <tr>
                    <td>夜间</td>
                    <td>⛅</td>
                    <td>多云</td>
                    <td class="tdlt">低温7℃</td>
                    <td>无持续风向</td>
                    <td style="width: 100px">3级风</td>
                </tr>
            </tbody>
</table>
<table class="table table2" cellpadding="10px">
           <tbody>
                <tr>
                    <td rowspan="2" style="background: #ff8102;
                        color: seashell">24日星期天<br/>2℃~20℃</td>
                    <td>白天</td>
                    <td>?</td>
                    <td>晴</td>
                    <td class="tdht">高温20℃</td>
                    <td>无持续风向</td>
                    <td>微风</td>
                </tr>
                <tr>
                    <td>夜间</td>
                    <td>⛅</td>
                    <td>多云</td>
                    <td class="tdlt">低温2℃</td>
                    <td>无持续风向</td>
                    <td style="width: 100px">3~4级风</td>
                </tr>
            </tbody> 
</table>
</body>
</html>

2.效果图

效果图

3.知识点总结

小古月成

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
前端基础之表格（看这里就够了）

代码<!DOCTYPE html><html><head><title>前端基础之表格table</title><meta charset="UTF-8"><style> .table{ margin: 10px auto; border...
复制链接

扫一扫