表格&表格细线边框

最新推荐文章于 2024-09-30 15:42:36 发布

羡云不羡君

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量94

点赞数

分类专栏：前端3剑客文章标签：前端

本文链接：https://blog.csdn.net/weixin_54401017/article/details/134402484

版权

前端3剑客专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了HTML中表格的使用，包括标签结构、属性设置（如对齐方式、边框和间距）、如何合并单元格（跨行和跨列），以及CSS如何控制边框合并和美化小说排行榜表格。特别关注了当cellspacing为0时处理边框重叠的方法。

摘要由CSDN通过智能技术生成

1.常使用标签

<table></table>

<thead></thead>

<tbody></tbody>

<tr></tr>

<th></th>

<td></td>

2.表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定表格边框与其内容之间的距离，默认1像素
cellspacing	像素值	规定单元格之间的距离，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

3.合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格个数"
跨列合并：colspan="合并单元格个数"

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码。
跨列: 最左侧单元格为目标单元格，写合并代码。

合并单元格三步曲：

先确定是跨行还是跨列合并
找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan= "2" ></td>
删除多余的单元格

4.表格细线边框

4.1 问题

当cellspacing设置为0像素时，单元格与单元格之间的距离是0像素，单元格之间的线条会重叠，导致边框变粗。

如图：

4.2 解决

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse: collapse;

collapse单词是合并的意思
border-collapse: collapse; 表示相邻边框合并在一起。

5.小说排行表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今日小说排行榜</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
        <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        </thead>
        <tbody style="text-align: center">
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" width="10" height="10"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" width="10" height="10"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" width="10" height="10"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" width="10" height="10"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" width="10" height="10"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" width="10" height="10"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" width="10" height="10"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        </tbody>

    </table>
</body>
</html>

使用CSS的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今日小说排行榜</title>
    <style>
        table {
            width: 500px;
            height: 249px;
            border-spacing: 0;  /* 用於控制單元格於單元格之間的距離 */
            margin: 0 auto;     /* 表格水平方向居中 */
            /*border-collapse: collapse; !* 合併單元格重複的邊框 *!*/
        }
        td,th {
            border: 1px solid black;
            text-align: center;  /* 單元格中的內容水平居中 */
        }
        img {
            width: 10px;
            height: 10px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        </tbody>

    </table>
</body>
</html>