html之table学习

最新推荐文章于 2024-07-17 18:00:00 发布

不想有bug的小菜鸟

最新推荐文章于 2024-07-17 18:00:00 发布

阅读量127

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_45030966/article/details/119358069

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.table标签

表格
    table
        thead
            tr>th
        tbody
            tr>td
        tfoot
    属性
        align:对齐方式 center,left,rgiht
        border:边框整数 px
        cellspacing:单元格与单元格之间的距离
        cellpadding:内容与单元格之间的距离
        bgcolor:设置表格颜色
        width：设置表格宽度

通常还可以使用css样式去设计表格

常用的样式：

border-collapse: collapse 设置表格的边框将它设置为单一的边框

border：1px red solid 设置边框为1px宽颜色为红实线

虚线为dotted dashed

border-style:设置边框的显示样式，有solid,dashed,dotted等

background:设置背景颜色

color:设置内部文字

table .tr2>td:first-child:类名为tr2下第一个td的子元素

text-align:center 设置文字的位置，还包括left，right等

border-spacing: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>课表</title>
    <style>
        table {
            border-collapse: collapse
        }
        
        table .tr1 {
            border: 1px #151616 solid;
        }
        
        table td {
            border-style: dotted;
        }
        
        table .tr1 {
            background: #f1f7f7;
        }
        
        table .tr2>td:first-child,
        table .tr3>td:first-child,
        table .tr4>td:first-child,
        table .tr5>td:first-child,
        table .tr6>td:first-child,
        table .tr7>td:first-child,
        table .tr8>td:first-child,
        table .tr9>td:first-child,
        table .tr10>td:first-child,
        table .tr11>td:first-child,
        table .tr12>td:first-child,
        table .tr13>td:first-child {
            background: #f1f7f7;
            width: 10px;
            height: 20px;
            text-align: center;
            
        }
    </style>
</head>

<body>
    <div>
        <table border="1" cellspacing="0">

            <tr class="tr1">
                <td></td>
                <td>周一</td>
                <td>周二</td>
                <td>周三</td>
                <td>周四</td>
                <td>周五</td>
            </tr>
            <tr class="tr2">
                <td>1 8:30</td>
                <td rowspan="2" style="background: #ed5565;">大学英语(IV)@10203</td>
                <td></td>
                <td rowspan="2" style="background: #4baae3;">大学体育(IV)</td>
                <td colspan="2"></td>

            </tr>
            <tr class="tr3">
                <td>2 9:30</td>
                <td></td>
                <td colspan="2"></td>


            </tr>
            <tr class="tr4">
                <td>3 10:30</td>
                <td></td>
                <td rowspan="2" style="background: #fdcf6b;">信号与系统@11302</td>
                <td rowspan="2" style="background: #58da99;">形式与政策(IV)@15208</td>
                <td></td>
                <td rowspan="2" style="background: #73d4e6;">算法结构与分析</td>
            </tr>
            <tr class="tr5">
                <td>4 11:30</td>
                <td></td>
                <td></td>


            </tr>
            <tr class="tr6">
                <td>5 12:30</td>
                <td></td>
                <td rowspan="2" style="background: #58da9d;">模拟电子技术基础@16204</td>
                <td></td>
                <td rowspan="2" style="background: #3d55b2;">电装实习@11301</td>
                <td></td>
            </tr>
            <tr class="tr7">
                <td>6 14:30</td>
                <td></td>

                <td></td>
                <td></td>

            </tr>
            <tr class="tr8">
                <td>7 15:30</td>
                <td rowspan="2" style="background: #f0d154;">毛概@14208</td>
                <td></td>
                <td rowspan="2" style="background: #51dbc2;">电路信号与系统实验</td>
                <td colspan="2"></td>

            </tr>
            <tr class="tr9">
                <td>8 16:30</td>
                <td></td>
                <td colspan="2"></td>


            </tr>
            <tr class="tr10">
                <td>9 17:30</td>
                <td colspan="4"></td>

                <td rowspan="2" style="background: #6440b5;">信号与系统</td>
            </tr>
            <tr class="tr11">
                <td>10 18:30</td>
                <td colspan="3"></td>

                <td rowspan="2" style="background: #f1da56;">大学体育</td>

            </tr>
            <tr class="tr12">
                <td>11 19:30</td>
                <td colspan="3"></td>
                <td></td>
            </tr>
            <tr class="tr13">
                <td>12 20:30</td>
                <td style="background: #78c0cc;">选修</td>
                <td colspan="4"></td>

            </tr>

        </table>
    </div>

</body>

</html>

结果：

如果有错误，希望能够指出来

谢谢浏览

不想有bug的小菜鸟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html之table学习

1.table标签表格 table thead tr>th tbody tr>td tfoot 属性 align:对齐方式 center,left,rgiht border:边框整数 px cellspacing:单元格与单元格之间的距离 cellpadding:内容与单元格之间的距离 bgcolo...
复制链接

扫一扫