HTML学习笔记---table表格，display属性（结合我的clear:both看）

最新推荐文章于 2022-03-30 21:12:12 发布

xiaoa~

最新推荐文章于 2022-03-30 21:12:12 发布

阅读量1.1k

点赞数

分类专栏： html学习笔记

本文链接：https://blog.csdn.net/qq_34964399/article/details/79370595

版权

html学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">A1</td>    <!--合并行，这里删除B1单元格，才能使表格正常-->
                <td colspan="2">A2</td>    <!--合并列，这里删除A3单元格，才能是表格正常-->
                <td>A4</td>
            </tr>
             <tr>
                <td>B2</td>
                <td>B3</td>
                <td>B4</td>
            </tr>
        </tbody>
    </table>
    <div style="background-color:red; display:inline">悟空</div>   <!-- inline会让块级标签定位合适的大小 -->
    <span style="background-color:blue;">达尔</span>
    <span style="background-color:grey;display:block">凯奇</span>   <!-- block会使span撑到最大 -->
    <span style="background-color:red;display:none">乔丹</span>   <!-- 隐藏标签 -->
    <span style="background-color:blue;width:100px,height:70px">林冲</span>
    <span style="display:inline-block;background-color:red;height:50px;width:100px">鲁班</span>  <!-- inline-block：行内标签不能设置大小，margin，padding，用了它就那个设置了 -->
</body>
</html>

最好给表格添加样式，不然不好看，下面的图片就是没有给表格添加样式

   table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }

xiaoa~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记---table表格，display属性（结合我的clear:both看）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;tabl
复制链接

扫一扫