CSS基础-05-表格（表格边框、 折叠边框 border-collapse、水平对齐 text-align、垂直对齐 vertical-align 、表格填充 padding）

已于 2022-11-18 23:50:02 修改
阅读量4.5k 收藏 30
点赞数 4
分类专栏： # CSS基础教程 文章标签： css border-collapse text-align 水平对齐 垂直对齐
于 2022-04-07 19:55:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123523607
版权

文章目录

1. 边框（border）

1.1 添加边框

以下是简单示例，边框详细使用后边有单独的文档。

语法示例

table {
	border:1px solid black;
}

说明：
border 后边的参数 没有顺序关系
此处依次表示：边框宽、边框样式、边框颜色

完整示例

  • 代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            /* border-width:10px; */
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>姓</th>
            <th>名</th>
            <th>字</th>
        </tr>
        <tr>
            <td>刘</td>
            <td>备</td>
            <td>玄德</td>
        </tr>
        <tr>
            <td>关</td>
            <td>羽</td>
            <td>云长</td>
        </tr>
        <tr>
            <td>张</td>
            <td>飞</td>
            <td>翼德</td>
        </tr>
    </table>
</body>

</html>
  • 结果显示
    在这里插入图片描述

上图我们可以看到，表格的边框似乎是双线，其实我们是因为我们分别画了table（表格）、th（表头）、td（格）的边框。
如果我们分开画是下边的效果

示例（table 边框）

  • 代码
    <style>
        table{
            border: 1px solid black;
            /* border-width:10px; */
        }
    </style>
  • 效果
    在这里插入图片描述

示例（th边框）

  • 代码
    <style>
        th{
            border: 1px solid black;
            /* border-width:10px; */
        }
    </style>
  • 效果
    在这里插入图片描述

示例（td 边框）

  • 代码
    <style>
        td{
            border: 1px solid black;
            /* border-width:10px; */
        }
    </style>
  • 效果
    在这里插入图片描述

1.2 折叠边框（border-collapse）

语法示例

table {
    border-collapse: collapse;
}

完整示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        table {
            border-collapse: collapse;
        }

        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>姓</th>
            <th>名</th>
            <th>字</th>
        </tr>
        <tr>
            <td>刘</td>
            <td>备</td>
            <td>玄德</td>
        </tr>
        <tr>
            <td>关</td>
            <td>羽</td>
            <td>云长</td>
        </tr>
        <tr>
            <td>张</td>
            <td>飞</td>
            <td>翼德</td>
        </tr>
    </table>
</body>

</html>
  • 显示示例
    在这里插入图片描述
  • 说明

当然，你在td、th里边都写上折叠边框也没关系：

        table,
        td,
        th {
            border-collapse: collapse;        
            border: 1px solid black;
        }

2. 高度和宽度（width/height）

语法示例

  • 宽度和页面同宽
width:100%;
  • 固定宽度
width:50px
  • 高度占表格的百分比
    table高度设置百分比没有意义；th、td设置高度百分比是占表格高度的比例。
height: 50%
  • 固定高度
height:50px

完整示例

  • 代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        th {
            border-collapse: collapse;
        }

        table {
            width: 100%;
        }

        th {
            height: 50px;
        }

        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>姓</th>
            <th>名</th>
            <th>字</th>
        </tr>
        <tr>
            <td>刘</td>
            <td>备</td>
            <td>玄德</td>
        </tr>
        <tr>
            <td>关</td>
            <td>羽</td>
            <td>云长</td>
        </tr>
        <tr>
            <td>张</td>
            <td>飞</td>
            <td>翼德</td>
        </tr>
    </table>
</body>

</html>
  • 结果显示
    在这里插入图片描述

示例（表头高度设置为百分比）

  • 设置表格固定高度
  • 设置表头高度占整个表格的60%
  • 代码
    <style>
        table {
            border-collapse: collapse;
            width: 200px;
            height: 500px;
        }

        th {
            height: 60%;
        }

        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>
  • 效果

表格高度剩下的部分被剩下的内容平分
在这里插入图片描述

3. 对齐

3.1 水平对齐（text-align）

语法示例

text-align:center;
text-align:right;

完整示例

    <style>
        table {
            border-collapse: collapse;
            width: 200px;
        }

        th,
        td {
            height: 20px;
            text-align:center;
        }

        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>
  • 效果
    在这里插入图片描述

3.2 垂直对齐（vertical-align）

语法示例

  • 垂直居顶
vertical-align:top;
  • 垂直中（默认）
vertical-align:center;
  • 垂直居底
vertical-align:bottom;

完整示例

设置表头高度为 80px，内容居顶部

  • 代码
    <style>
        table {
            border-collapse: collapse;
            width: 200px;
        }

        th{
            height: 80px;
            text-align:top;
        }

        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>
  • 效果
    在这里插入图片描述

4. 表格填充（padding）

语法

设置内容具边框距离（我们会在后边边框中详细说明）

padding: 20px;

完整示例

    <style>
        table {
            border-collapse: collapse;
            width: 200px;
        }

        th,
        td{
            height: 20px;
            padding: 20px;

        }

        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>

在这里插入图片描述

玄德公笔记
关注
  • 4
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
csstable跨列居中_CSS进阶11-表格table
weixin_32561279的博客
01-26 1420
(注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！)(注2：更多内容请查看我的目录。)1. 表格简介本文定义了CSS中表格的处理模型。这种处理模式的一部分就是布局。对于布局，本文介绍两种算法; 第一种是固定表格布局算法，其定义很明确，但第二种是自动表格布局算法，该规范没有完全定义。对于自动表格布局算法，一些广泛部署的实现已经实现了相对紧密的互操作性。表格布局可以用来表示数...
CSS基础 - 4+6+9
极正君
03-10 166
CSS基础-语法和选择器 - 4种引入方式 + 6类选择器 + 9大属性
CSS实现表格细边框的两种方法
09-25
细边框这个制作方法是必不可少的，使用css就可以轻松实现，方法还不止一个，本文为大家介绍两个不错的方法，希望对大家有所帮助
CSS 基础教程：表格（一）
m0_65012566的博客
05-14 489
表格是一个HTML元素，用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>标签创建，并且可以使用CSS属性进行样式设置。本章讨论如何使用CSS设置HTML表格的不同属性。首先看看下面的示例，它演示了一个简单的HTML表格：</</</</</</</</</</</</</</</</</</上述示例中的表格是数据的简单显示，可以使用CSS进行样式设置。widthheighttext-alignborder让我们看看如何在以下各节中使用这些属性的示例。
html 表格文字颜色 css,CSS 表格-JavaScript中文网-JavaScript教程资源分享门户
weixin_28834765的博客
07-01 240
使用 CSS 可以使 HTML 表格更美观。CompanyContactCountryAlfreds FutterkisteMaria AndersGermanyBerglunds snabbköpChristina BerglundSwedenCentro comercial MoctezumaFrancisco ChangMexicoErnst HandelRoland MendelAustr...
Web--CSS基础
m0_64372178的博客
06-10 1552
常见的需要掌握属性的css属性，以及利用css实现一个小卡片
CSS - 相关汇总
william_n的博客
07-25 3759
1.block，inline和inline-block概念和区别 https://www.cnblogs.com/KeithWang/p/3139517.html 2.::before和::after伪元素的用法 https://www.cnblogs.com/starof/p/4459991.html 3.如何css让表格td中的文字垂直居中 ...
前端开发--CSS基础
student66666666的博客
07-22 1589
前端开发、CSS
第九课--表格
阅读之后，对你有帮助，那就点个赞再走吧
08-07 140
a.表格边框 table,th,td{ border: 1px black solid; } b.折叠边框(边款细线) table,th,td{ border: 1px black solid; } table { border-collapse:collapse; } c.表格宽度和高度 /*表格宽度和高度*/ table { width:100%; } t...
零基础学习web前端---css基础2
CSDN_Duanjiayu的博客
03-12 189
CSS的属性设置 1.背景属性设置 2.文本属性 3.字体属性设置 font-family:指定一个元素的字体样式【黑体 宋体....】 font-size:用于设置字体大小 font-style:指定文本的字体倾斜 italic--设置倾斜【正常字体】 oblique---设置倾斜【非正常字体】 normal---什么都有 italic 和 oblique 的区...
css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
12-10
在CSS布局中，垂直对齐是一项重要的任务，用于调整元素在垂直方向上的位置。`vertical-align`属性就是用来实现这一目的的关键。它主要用于控制行内元素（如`<span>`、`<img>`等）和表格单元格（`<td>`）内部内容的...
CSS教程:水平对齐(text-align)
12-04
**CSS中的`text-align`属性**是用来控制元素内部文本的水平对齐方式，它能够帮助开发者实现各种文本布局效果，让网页设计更加美观和规范。本文将深入探讨`text-align`属性的用法、适用范围、继承性以及在不同浏览器...
css vertical-align属性的一些理解与认识(二) text-top篇
09-25
CSS中的`vertical-align`属性是一个复杂且微妙的特性，它主要用于控制行内元素或表格单元格内元素的垂直对齐方式。在本文中，我们将深入探讨`vertical-align`的`text-top`值以及它在不同浏览器下的表现。 首先，...
IE6下 vertical-align:middle 和 height 引发的边框消失
09-27
在CSS布局中，`vertical-align`属性经常被用于调整元素的垂直对齐方式，而`height`属性则用来设定元素的高度。然而，在IE6这个古老的浏览器中，将这两个属性一起使用时，可能会出现一些不寻常的问题，特别是当涉及到...
CSS样式--基础内容速查||HTML
qq_60974512的博客
06-05 89
CSS样式的一些基本内容速查，希望对你写网页有帮助
CSS性能优化：从加载速度到渲染效率的全方位提升
WayneYalejk的博客
07-22 393
在快节奏的互联网环境中，网页的加载速度和渲染效率直接关系到用户体验和搜索引擎排名。CSS作为网页样式的主要描述语言，其性能优化同样不容忽视。本文将介绍一系列CSS性能优化的策略，帮助开发者从加载速度到渲染效率实现全方位的提升。
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 426
css浮动——float特点
重拾CSS，前端样式精读-函数（颜色，计算，图像和图形）
07-22 861
它接收两个参数，第一个是变量值。第二个是默认值，当变量不存在时就会默认使用第二个值。图像集背景效果可以使用鼠标滚轮对页面缩放来观察效果。
css table属性 border属性不生效
07-27
您好！对于CSS的table属性，border属性应该是可以生效的。但是，有一些常见的原因可能会导致border属性不起作用。以下是一些可能的原因和解决方法： 1. CSS样式被覆盖：请确保没有其他CSS样式将border属性覆盖掉。您可以使用浏览器的开发者工具检查元素样式，查看是否有其他样式覆盖了border属性。 2. 边框样式设置错误：border属性由三个子属性组成：border-width、border-style和border-color。确保这些属性都被正确设置。例如，border-style可以设置为solid、dashed或dotted等等。 3. 表格单元格没有内容或高度太小：如果表格单元格没有内容或高度非常小，边框可能会无法显示。您可以尝试添加一些内容或增加单元格的高度来查看是否生效。 4. 表格结构错误：如果表格结构出现问题，例如缺少闭合的标签或嵌套错误，可能会导致边框属性不起作用。请确保表格结构正确无误。 希望以上解决方法能帮助您解决border属性不生效的问题！如果还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玄德公笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值