什么？你居然会做三线表

最新推荐文章于 2022-11-20 10:14:49 发布

基本模型与排列组合

最新推荐文章于 2022-11-20 10:14:49 发布

阅读量324

点赞数

分类专栏：前端培训文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_50832904/article/details/120019560

版权

前端培训专栏收录该内容

27 篇文章 0 订阅

订阅专栏

table{
    width: 600px;
    height: 200px;
    border-collapse: collapse;    
}

thead{
    border-top-width: 4px;
    border-top-style: solid;
    border-top-color:black;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color:gray;
}

tfoot{
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color:black;
}


/* 
::grammar-error
table{
    text-align: center;//可以继承
    vertical-align:bottom;
} */

td{
    text-align: center;
    vertical-align: bottom;
}

table{
    margin:0px auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页制作</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <table>
        <caption><h2>Table Caption</h2></caption>
        <thead>
            <tr>
                <th>区域</th>
                <th>1月</th>
                <th>2月</th>
                <th>3月</th>
            </tr>
        </thead>
       <tbody>
           <tr>
               <td>北京</td>
               <td>tabledata2</td>
               <td>tabledata3</td>
               <td>tabledata4</td>
           </tr>
           <tr>
               <td>上海</td>
               <td>tabledata2</td>
               <td>tabledata3</td>
               <td>tabledata4</td>
           </tr>
           <tr >
               <td>广州</td>
               <td>tabledata2</td>
               <td>tabledata3</td>
               <td>tabledata4</td>
           </tr>
       </tbody>
       <tfoot>
            <tr>
                <td colspan="4">this is the tablefooter</td>
                <!-- <td>tablefooter</td>
                <td>tablefooter</td>
                <td>tablefooter</td> -->
            </tr>
       </tfoot>
    </table>
</body>
</html>

基本模型与排列组合

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么？你居然会做三线表

table{ width: 600px; height: 200px; border-collapse: collapse; }thead{ border-top-width: 4px; border-top-style: solid; border-top-color:black; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-co.
复制链接

扫一扫