CSS Table（表格）

最新推荐文章于 2024-03-05 19:30:22 发布
最新推荐文章于 2024-03-05 19:30:22 发布
阅读量8.8k 收藏 27
点赞数 7
分类专栏： Web学习进阶 文章标签： css table标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16131393/article/details/64127967
版权

**

首先介绍表格标签

**

一个完整的表格示例如下

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

table标签：表格
tr标签：表格中的每一行
th标签：表格中导航栏的每一项元素
td标签：表格中除导航栏外一行的一项元素

当然如上还是不能显示表格的，还需要设置表格css样式才行，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
        <style type="text/css">
            table,th,td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>科目</th>
                <th>分数</th>
            </tr>
            <tr>
                <td>
                    语文
                </td>
                <td>
                    120
                </td>
            </tr>
            <tr>
                <td>
                    数学
                </td>
                <td>
                    120
                </td>
            </tr>
            <tr>
                <td>
                    英语
                </td>
                <td>
                    120
                </td>
            </tr>
        </table>
    </body>
</html>

效果：

这里写图片描述

标签中的文本会自动加粗居中处理

则一行行往下叠加

style里面声明了table，th，td三个标签共用样式

请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。

折叠边框

<style type="text/css">
            table{
                border-collapse: collapse;
            }
            table,th,td{
                border: 1px solid black ;
            }
        </style>

效果：

这里写图片描述

自定义表格宽高

上面表格大小都是自适应大小，如果我们要自定义表格宽高改如何做？通过css

        <style type="text/css">
            table{
                border-collapse: collapse;
                width: 100%;
            }
            table,th,td{
                border: 1px solid black ;
            }
            th,td{
                height: 50px;
            }

        </style>

效果：
这里写图片描述

这里可以看到width: 100%;是占满屏幕，th,td 设置每一行的高度

表格文字对齐

表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，像左，右，或中心：

<style type="text/css">
            table{
                border-collapse: collapse;
                width: 100%;
            }
            table,th,td{
                border: 1px solid black ;
            }
            th,td{
                height: 50px;
                text-align: center;
            }

        </style>

效果：

这里写图片描述

垂直对齐：vertical-align

    <style type="text/css">
            table{
                border-collapse: collapse;
                width: 100%;
            }
            table,th,td{
                border: 1px solid black ;
            }
            th,td{
                height: 50px;
                text-align: center;
                vertical-align: bottom;
            }

        </style>

效果：

这里写图片描述

添加表格标题

    <table>
            <caption>成绩表</caption>
            <tr>
                <th>科目</th>
                <th>分数</th>
            </tr>
            <tr>
                <td>
                    语文
                </td>
                <td>
                    120
                </td>
            </tr>
            <tr>
                <td>
                    数学
                </td>
                <td>
                    120
                </td>
            </tr>
            <tr>
                <td>
                    英语
                </td>
                <td>
                    120
                </td>
            </tr>
        </table>

默认添加在上面居中，标题位置可以在css中控制

如下：

    <style type="text/css">
            table{
                border-collapse: collapse;
                width: 100%;
            }
            table,th,td{
                border: 1px solid black ;
            }
            th,td{
                height: 50px;
                text-align: center;
                vertical-align: middle;
            }
            caption{
                caption-side: bottom;
                color: red;
            }
        </style>

效果：

这里写图片描述

制作一个个性表格

以此为例：

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
        <style type="text/css">
            table{
                border-collapse: collapse;
            }

            th{
                background-color: rgb(128, 102, 160);
                color: white;
                font-weight:bold ;
            }
            td{
                color: black;
            }
            tr,th{
                border-width: 1px;
                border-style: solid;
                border-color: rgb(128, 102, 160);
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Phone</th>
            </tr>
            <tr>
                <td>
                    Albert Ellis
                </td>
                <td>
                    New York
                </td>
                <td>+1 718 000000</td>
            </tr>
            <tr>
                <td>
                    Marcus Aurelius
                </td>
                <td>
                    Rome
                </td>
                <td>+1 718 000000</td>
            </tr>
            <tr>
                <td>
                    Epictetus
                </td>
                <td>
                    Greece
                </td>
                <td>+1 718 000000</td>
            </tr>
                <tr>
                <td>
                    Aristotle
                </td>
                <td>
                    Greece
                </td>
                <td>+1 718 000000</td>
            </tr>
        </table>
    </body>
</html>

实现效果：

这里写图片描述

隔壁小王66
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css table 表格标签
04-21
table表格的样式标签！包含了css,还有图片！ 进来看看吧
漂亮的表格css+html
02-11
一个很好的表格html代码，里面包含了css表格类型，界面清晰、清爽、相当的漂亮！
CSS笔记——表格元素table单元格合并和妙用（利用table-cell实现块级、多行文本元素水平垂直居中）、表单元素form
bqiuer的博客
09-25 4027
HTML中，表格由 table 元素来定义.还有一些用于表格的其他标签，如 caption、thead、tbody、tfoot、th 等。是用于收集用户信息的一组元素。formnovalidate: 定义提交表单数据时是否要忽略表单元素的验证。定义表单元素的值，例如文本框中的默认文本、默认选中的单选框或复选框等。表单元素只读，用户无法修改其值，通常用于展示数据或只读状态的表单元素。禁用表单元素，使其无法接收用户输入，通常用于表单元素不可用的情况。：表单的容器(表单域），用于将表单元素组织在一起。
纯css实现表格
最新发布
leoz1的博客
03-05 402
【代码】纯css实现表格。
CSS 表格：Table
梁辰兴的博客
09-19 1596
CSS折叠边框是一种用于实现边框缩小或扩张的CSS技巧，主要通过设置边框的宽度和高度，使边框在需要缩小或扩张时根据实际需要进行折叠。请注意，这只是一种模拟折叠边框的方法，实际的折叠边框效果可能需要使用其他技术或者配合其他属性来实现。如果单元格中的内容超出了单元格的宽度或高度，可以使用CSS的溢出处理方式来处理，例如使用。同时，在表格内部，单元格之间的边框是默认不显示的，如果需要显示，需要给单元格也设置。需要注意的是，对于表格的行高或单元格宽度，可以通过设置单元格的。CSS 表格属性可以用来改变表格的样式。
CSS-表格表单_BFC
2301_80864686的博客
11-04 778
（1）盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止margin重叠）（3）overflow的值不为visible—单纯的div不是BFC，如果添加了overflow：hidden等就是BFC。（2）float的值不为none—单纯的div不是BFC，如果添加了浮动就是BFC。（3）计算 BFC 的高度时，浮动元素也参与计算（应用：清除内部浮动）（2）BFC的区域不会与浮动的盒子发生重叠（应用：自适应两栏布局）（2）调整单元格与单元格之间的间距。
CSS之表格属性
qq_73289653的博客
04-22 368
无作用，因为border-collapse：collapse合并了单元格边框。和Rowspan的作用，如图三分别合并了行rowspan和列colspan。（默认为separate，就是无合并，collapse就是合并了），Cellpadding， Border-collapse 作用。具体如代码注释和实行效果更加清楚的了解表格属性，运行结果如图四。如图一设置了cellspacing和cellpadding。和Border-collapse：collapse。单元格与内容边界之间的关系。表头（会加粗，居中）
css中table标签详解(一)
热门推荐
weixin_45581836的博客
11-27 1万+
css中table标签详解(一) 什么是table标签，以及table标签的组成？ 不叨叨，直接上代码 <table> <tr> <td></td> </tr> </table> 我们可以看到table标签的组成是由table tr td 构成的. 其中...
CSS 之 table 表格布局
weixin_45092437的博客
10-09 5693
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
CSS-table表格
qq_54282411的博客
06-15 1570
一、表格的创建 表格由<table>开始,</table>结束。除此之外还需要行元素<tr>和单元格元素<td> 语法格式： <table> <tr> <td>单元格内的文字</td> …… </tr> …… </table> 解释： <table></table>：用于定义一个表格 <tr></tr>：用于定义
CSS table标签
guizi0809的博客
09-07 3947
一、标签定义 一个完整的table包含thead、tbody、tfoot这些语义化标签，方便对表格中的行进行分组，这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。 其中 th(table head) 一般用于定义表头，也可用于定义单元格，文本会默认加粗 tr(table row) 定义表格中的行 td(table data) 定义表格中单元格 <table> <!-- 表头部--> <thead>
好看的table-css样式
qq_45450789的博客
04-13 5477
1.单像素边框css表格 源代码： <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable t.
CSS制作可输入内容的table表格
12-13
<table class=”formdata”> 公司销售统计表 2004～2007</caption> /*标题*/ <tr> <th></th> /*行标题*/ ”col”>2004</th> ”col”>2005</th> ”col”>2006</th> ”col”>2007</th> </tr> <tr> ”row”>硬盘(Hard ...
利用CSS生成精美细线Table表格无需复杂style代码
09-25
很多时候利用复杂style代码，来生成这样的表格，造成了页面的修改性和可读性都非常差。这里推荐使用css来产生一个细线表格，感兴趣的朋友可以了解下
通过css动画实现一个表格滚动轮播效果
12-28
css动画的一个应用，与此前的css走马灯同样的内容。只是一次不同的应用，具体实现如下 序号 姓名 年龄 性别 专业 </ul>
CSS display属性的table表格布局
01-19
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的...
uniapp 账号登陆，账号绑定/解绑流程，躺坑
隔壁小王的博客
03-19 1933
第一次开发uniapp微信小程序，记录一下开发中遇到的流程以及坑 账号登陆 1、uni.login 获取code，在调用接口传入code获取uKey 绑定账号/解绑 1、uni.login获取code，这个code不能拿登陆时获取的code，每次请求都应该是不同的code，此坑之一 2、获取到code之后uni.getUserInfo获取个人信息中的encryptedData，iv 3、拿code，encryptedData，iv去调用绑定/解绑接口实现绑定/解绑账号功能 4、坑之二，流程应该是先uni.l
flex为1的时候，子元素限制一行时内容撑出父布局解决方案
隔壁小王的博客
01-12 1339
今天遇到一个问题，就是flex布局，左边宽度不定，右边填满剩余空间时，右边元素子元素内容会撑出父布局，遂记录之。 html: <div class="container"> <div class="left"> 宽度自适应 </div> <div class="right"> <div class="content"> 子元素 </div> </div> </div
css实现固定table表格
06-09
要实现固定表格，可以使用CSS中的position和overflow属性，具体步骤如下： 1. 给表格外层容器div设置固定高度和宽度，overflow属性设置为auto或scroll，这样就会出现滚动条。 2. 将表格放在容器div内，并设置表格...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值