简单表格01

温婉婉

已于 2022-09-08 22:36:19 修改

阅读量40

点赞数

分类专栏： HTML 文章标签： css html 前端

于 2022-09-05 21:46:58 首次发布

本文链接：https://blog.csdn.net/weixin_48796690/article/details/126714076

版权

HTML 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.border-collapse: collapse;
表示：这个要在 <table></table>标签中写，不能在<td></td>标签中写，表示表格边框与单元格边框重合的地方进行合并，且谁的border粗，以谁的为准

代码如下：

<!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>表格02</title>
</head>

<style>

    h1 {
        text-align: center;
    }

    span {
        border-bottom-color: greenyellow;
        border-bottom-style: solid;
        border-bottom-width: 3px;
    }

    table {
        width: 100%;
        height: 480px;
        border: 5px solid red;

        border-collapse: collapse;
        /* border-collapse: collapse; 表格边框与单元格边框重合的地方进行合并，且谁的border粗，以谁的为准*/
    }
  

    td {
        width: 25%; 
        height:80px;
        border: 3px solid greenyellow;
       
        font-size: 40;
        font-weight: 20;
        text-align: center;
    }
</style>


<body>
    <h1><span>私人教练</span>&nbsp;日销报表</h1>

    <table>
    <tr>
        <td>教练姓名</td>
        <td>会员名字</td>
        <td>级别</td>
        <td>美照</td>
    </tr>

    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td><img src="./image/图组图片6.png" alt=""></td>
    </tr>

    <tr>
        <td>ddd</td>
        <td>eee</td>
        <td>fff</td>
        <td><img src="./image/图组图片6.png" alt=""></td>
    </tr>

    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><img src="./image/图组图片6.png" alt=""></td>
    </tr>

    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><img src="./image/图组图片6.png" alt=""></td>
    </tr>

    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><img src="./image/图组图片6.png" alt=""></td>
    </tr>

</table>

</body>

</html>