表格样式

最新推荐文章于 2024-06-13 01:26:35 发布
最新推荐文章于 2024-06-13 01:26:35 发布
阅读量3.8k 收藏 13
点赞数 9
分类专栏： # Web技术应用基础——CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45823118/article/details/115363957
版权

表格样式

1.表格边框

任务描述

本关任务：在本关中，我们将学习如何使用CSS设置表格样式，使表格更好看。本关任务完成之后的效果图(index.html)如下：
在这里插入图片描述
完成index.html中表格样式。要求如下：

  • 设置表格为折叠边框；
  • 设置 Table属性边框为2px粗的黑色(black)实线；
  • 设置th属性边框为1px粗的灰色(grey)实线；
  • 设置td属性边框为1px粗的灰色(grey)点线。

注意：本关中，使用单词的方式指定颜色。

相关知识

下面网页代码的表格：

HTML 页面：

<body>
    <table width="400">
        <!-- 表标题 -->
        <caption>通讯录</caption>
        <!-- 表头 -->
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">电话</th>
            <th scope="col">备注</th>
        </tr>
        <tr>
            <td>李雯</td>
            <td>18012311234</td>
            <td>家人</td>
        </tr>
        <tr>
            <td>王谦</td>
            <td>17812311234</td>
            <td>同事</td>
        </tr>
        <tr>
            <td>周佳</td>
            <td>17413511234</td>
            <td>高中同学</td>
        </tr>
    </table>
</body>

显示效果如下：
在这里插入图片描述
表格边框

  • 我们使用 border属性为表格添加边框，这样HTML表格才会看起来更符合我们平时使用的表格。
  • border属性值可以按顺序设置的属性为：border-width、border-style和border-color。
  • 一般情况下会省略属性名，直接设置属性值。

其中，border-style可以取如下四种值：

  1. dotted: 点状；
  2. solid: 实线；
  3. double: 双线；
  4. dashed: 虚线。

例如，对上面的通讯录表格应用如下样式：

th,
td {
    border: 1px solid #000;        /*设置边框1px粗的黑色实线*/
}

显示效果如下：
在这里插入图片描述
折叠边框

但是，这样设置的通讯录表格有双边框。这是因为表格与th/td元素都有独立的边界。

所以，我们可以使用 border-collapse 属性设置折叠边框。折叠边框代表边框是否被折叠为一个单一的边框或相互隔开。

同样的，对上面的通讯录表格应用如下样式：

table {
    border-collapse: collapse; /*设置折叠边框*/
}
th,
td {
    padding: .5em .75em;
    border: 1px solid black; /*设置边框1px粗的黑色实线*/
}

显示效果如下：
在这里插入图片描述

代码文件

step1/contact_table/html:

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML – 简单表格</title>
    <style type="text/css">
    table {
        border-collapse: collapse;
    }

    th,
    td {
        padding: .5em .75em;
        border: 1px solid #000;
    }

    
    caption {
        font-weight: bold;
        margin-bottom: .5em;
    }

    

    tfoot {
        font-weight: bold;
    }
    </style>
</head>

<body>
    <table width="400">
        <!-- 表标题 -->
        <caption>通讯录</caption>
        <!-- 表头 -->
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">电话</th>
            <th scope="col">备注</th>
        </tr>
        <tr>
            <td>李雯</td>
            <td>18012311234</td>
            <td>家人</td>
        </tr>
        <tr>
            <td>王谦</td>
            <td>17812311234</td>
            <td>同事</td>
        </tr>
        <tr>
            <td>周佳</td>
            <td>17413511234</td>
            <td>高中同学</td>
        </tr>
    </table>
</body>

</html>

step1/index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>HTML – 简单表格</title>
        <link rel="stylesheet" href="step1/CSS/style.css">
    </head>

    <body>
        <table>
            <caption>彩排安排</caption>
            <thead>
                <!-- 表格头部 -->
                <tr>
                    <th scope="rowgroup">时间</th>
                    <th scope="col">周一</th>
                    <th scope="col">周二</th>
                    <th scope="col">周三</th>
                </tr>
            </thead>
            <tbody>
                <!-- 表格主体 -->
                <tr>
                    <th scope="row">上午8点</th>
                    <td>开场舞</td>
                    <td colspan="2">歌曲串烧</td>
                </tr>
                <tr>
                    <th scope="row">上午9点</th>
                    <td>小品</td>
                    <td>相声</td>
                    <td rowspan="2">大型魔术</td>
                </tr>
                <tr>
                    <th scope="row">上午10点</th>
                    <td>杂艺表演</td>
                    <td>乐队歌曲</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

step1/CSS/style.css:

table {
    /* ********** BEGIN ********** */
    border-collapse: collapse;
    border: 2px solid black;   
    /* ********** END ********** */
}
th,
td {
    padding: .5em .75em;
}
th {
    /* ********** BEGIN ********** */   
    border: 1px solid grey; 
    /* ********** END ********** */
}

td {
    /* ********** BEGIN ********** */
    border: 1px dotted grey; 
    /* ********** END ********** */
}

2.表格颜色、文字与大小

任务描述

本关任务：在本关中，我们将学习如何使用CSS设置表格样式，使表格更好看。本关任务完成之后的效果图（index.html）如下：
在这里插入图片描述
要求如下：

  • 设置标题(caption)字体为20px大小的粗体，高度为40px；
  • 设置th、td 共同属性。单元格大小的高度为50px，宽度为100px；字体样式设置为居中；
  • 修改th边框为白色；
  • 设置th背景色为lightseagreen，设置th字体颜色为白色。

相关知识

表格颜色

  • 表格颜色设置十分简便，与设置文字颜色的方式相同。在对应的表格元素标签中，使用color属性设置表格中的文字颜色，使用background属性可以设置表格元素的背景色。

例如，对于如下含表格的HTML页面：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>HTML – 简单表格</title>
</head>
<body>
    <table width="400">
        <caption>运动会跑步成绩</caption>
        <thead>
         <!-- 表格头部 -->
            <tr>
                <th scope="col">长度</th>
                <th scope="col">李雯</th>
                <th scope="col">王谦</th>
                <th scope="col">周佳</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th scope="row">100米</th>
                <td>14s</td>
                <td>16s</td>
                <td>13s</td>
            </tr>
            <tr>
                <th scope="row">200米</th>
                <td>26s</td>
                <td>23s</td>
                <td>25s</td>
            </tr>
            <tr>
                <th scope="row">400米</th>
                <td>70s</td>
                <td>73s</td>
                <td>69s</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th scope="row">总用时</th>
                <td>110s</td>
                <td>112s</td>
                <td>107s</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

我们设置其CSS样式如下：

table {
    border-collapse: collapse;
}
th,
td {
    border: 2px solid black;
}
th
{
    background-color:lightblue;  /*表格头部背景颜色*/
    color:white;                         /*表格头部字体颜色*/
}

显示效果如图：
在这里插入图片描述
表格文字对齐与文字粗细

  • 表格单元格默认为左对齐。
  • 在实际情况中，我们可以根据需求设置表格对齐方式。
  • 设置表格中文字对齐的方式，与设置段落文字对齐的方式相同，都是使用text-align属性。

同样的，设置表格文字粗细与设置段落文字粗细相同，都是使用font-weight属性。

例如，对于运动会成绩表格，设置其CSS如下：

table {
    border-collapse: collapse;
}
caption {
    font-weight: bold;                /*表格标题文字加粗*/
}
th,
td {
    border: 2px solid black;
}
th {   
    text-align: center;                /*表格头部居中对齐*/
    background-color:lightblue;  /*表格头部背景颜色*/
    color:white;                         /*表格头部字体颜色*/
}
td {
    text-align: right;                   /*表格主体右对齐*/
}
tfoot {
    font-weight: bold;               /*表格尾部文字加粗*/
}

显示效果如下：
在这里插入图片描述
表格宽度和高度

  • 在表格元素中使用width和height属性设置表格的宽度与高度。

例如，对于运动会成绩表格，设置其CSS如下：

table {
    width: 98%;                         /*表格整体宽度*/
    border-collapse: collapse; 
}
caption {
    height: 30px;
    font-weight: bold;                /*表格标题文字加粗*/
}
th,
td {
    height: 35px;                       /*表格高度*/
    border: 2px solid black;
}
th {   
    text-align: center;                  /*表格头部居中对齐*/
    background-color:lightblue;    /*表格头部背景颜色*/
    color:white;                           /*表格头部字体颜色*/
}
td {
    text-align: center;                   /*表格主体居中对齐*/
}
tfoot {
    font-weight: bold;               /*表格尾部文字加粗*/
}

显示效果如图：
在这里插入图片描述
其中表格宽度设置为98%，表格宽度始终保持页面的98%大小;

代码文件

step2/sample_color.html:

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML – 简单表格</title>
    <style type="text/css">
    table {
        width: 98%;                     /*表格整体宽度*/
        border-collapse: collapse;      /*表格折叠边框*/
    }

    caption {
        height: 30px;;
        font-weight: bold;                /*表格标题文字加粗*/
    }

    th,
    td {
        height: 35px;                     /*表格高度*/
        border: 2px solid black;
    }

    th {   
        text-align: center;                /*表格头部居中对齐*/
        background-color:lightblue;            /*表格头部背景颜色*/
        color:white;                         /*表格头部字体颜色*/
    }

    td {
        text-align: center;                   /*表格主体居中对齐*/
    }

    tfoot {
        font-weight: bold;               /*表格尾部文字加粗*/
    }
    </style>
</head>

<body>
    <table width="400">
        <caption>运动会跑步成绩</caption>
        <thead>
         <!-- 表格头部 -->
            <tr>
                <th scope="col">长度</th>
                <th scope="col">李雯</th>
                <th scope="col">王谦</th>
                <th scope="col">周佳</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th scope="row">100米</th>
                <td>14s</td>
                <td>16s</td>
                <td>13s</td>
            </tr>
            <tr>
                <th scope="row">200米</th>
                <td>26s</td>
                <td>23s</td>
                <td>25s</td>
            </tr>
            <tr>
                <th scope="row">400米</th>
                <td>70s</td>
                <td>73s</td>
                <td>69s</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th scope="row">总用时</th>
                <td>110s</td>
                <td>112s</td>
                <td>107s</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

step2/index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>HTML – 简单表格</title>
        <link rel="stylesheet" href="step2/CSS/style.css">
    </head>
    <body>
        <table>
            <caption>彩排安排</caption>
            <thead>
                <!-- 表格头部 -->
                <tr>
                    <th scope="rowgroup">时间</th>
                    <th scope="col">周一</th>
                    <th scope="col">周二</th>
                    <th scope="col">周三</th>
                    <th scope="col">周四</th>
                </tr>
            </thead>
            <tbody>
                <!-- 表格主体 -->
                <tr>
                    <th scope="row">上午8点</th>
                    <td>开场舞</td>
                    <td colspan="3">歌曲串烧</td>
                </tr>
                <tr>
                    <th scope="row">上午9点</th>
                    <td>小品</td>
                    <td>相声</td>
                    <td rowspan="2">大型魔术</td>
                    <td>乐队歌曲</td>
                    
                </tr>
                <tr>
                    <th scope="row">上午10点</th>
                    <td>杂艺表演</td>
                    <td>乐队歌曲</td>
                    <td>杂艺表演</td>
                    
                </tr>
                <tr>
                    <th scope="row">上午8点</th>
                    <td>开场舞</td>
                    <td>歌曲串烧</td>
                    <td>小品</td>
                    <td>相声</td>
                </tr>
            </tbody>
        </table>
    </body>
**step2/CSS/style.css:** 
table {
    border-collapse: collapse;
    border: 2px solid black;
}

caption {
    /* ********** BEGIN ********** */
    font-weight: bold;
    height: 40px;
    font-size: 20px;
    /* ********** END ********** */
}

th,
td {
    /* ********** BEGIN ********** */
    height: 50px; 
    width: 100px;                      
    text-align: center;
    
    /* ********** END ********** */
}

th {
    /* ********** BEGIN ********** */
    border: 1px solid white;
    background-color: lightseagreen;
    color: white;


    /* ********** END ********** */
}

td {
    border: 1px solid grey;
}
少年游四方
关注
  • 9
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS - 文本、字体样式
LIN的博客
09-20 1168
目录 CSS 字体样式 - font  简写属性 定义和用法 说明 - font-family 规定元素的字体系列 使用引号 - font-style 定义字体的风格 italic 和 oblique 的区别 - font-variant 设定小型大写字母 - font-weight 将文本设置为粗体 - font-size 设置文本的大小 使用像素来设置字体大小 使用 ...
table表格样式
前端技术
04-08 8291
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table.tftable, table.table-count { ...
CSS基础-05-表格（表格边框、 折叠边框 border-collapse、水平对齐 text-align、垂直对齐 vertical-align 、表格填充 padding）
运维玄德公
04-07 4533
1. 边框（border） 1.1 添加边框 示例（table 边框） 示例（th边框） 示例（td 边框） 1.2 折叠边框（border-collapse） 2. 高度和宽度（width/height） 示例（表头高度设置为百分比） 3. 对齐 3.1 水平对齐（text-align） 3.2 垂直对齐（vertical-align） 4. 表格填充（padding）...
CSS入门到精通——表格样式
最新发布
m0_73614626的博客
06-13 729
在实际情况中，我们可以根据需求设置表格对齐方式。设置表格中文字对齐的方式，与设置段落文字对齐的方式相同，都是使用。表格颜色设置十分简便，与设置文字颜色的方式相同。设置表格样式，使表格更优美。同样的，设置表格文字粗细与设置段落文字粗细相同，都是使用。设置表格样式，使表格更好看。设置表格样式，使表格更好看。但是，这样设置的通讯录表格有双边框。表格才会看起来更符合我们平时使用的表格。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。
HTML5
weixin_52957373的博客
07-20 6247
html超文本标记语言它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。.........
EduCoder-Web程序设计基础-html5—表格高级样式的设置-第3关：设置表格的内边框样式
weixin_51402180的博客
11-29 954
目录任务描述相关知识编程要求测试说明代码示例 任务描述 本关任务：编写一个两行两列的表格，实现如下图所示效果。 内部边框 相关知识 为了完成本关任务，你需要掌握：1.表格标签的一般属性，2.表格的内部边框的设置。 表格内部边框属性的设置 表格内部边框可以使用rules属性来设置，其取值可以为all、none rows、cols、groups。 例如，如果表格的外边框只需显示上边框，内部边框显示列边框线，属性设置如下： 编程要求 根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补
判断数字能不能被整除
qq_62671295的博客
11-24 4703
判断数字能不能被整除
表单样式
weixin_45165848的博客
07-20 1339
表单元素的样式 表单元素中除了可以设置简单的尺寸大小的样式 文本框类的元素可以设置边框等简单的样式修饰外 是做不了更复杂的，所以单复选框 单选框 需要复杂样式修饰的时候 需要借助其他标签来实现. 实现的办法可以是在元素外层加上一个标签然后调整父元素的样式 将单元框或者复选框的透明度设置成0 select只能设置宽高 边框等样式 所以想做复杂样式 可借助框架中提供的组件的样式 行内元素 内联元素 ...
CSS表格样式1
05-27
在CSS（层叠样式表）中，表格样式是网页设计中的一个重要组成部分，它能帮助我们打造出美观且功能丰富的数据展示区域。这篇博文“CSS表格样式1”可能详细讲解了如何利用CSS来定制HTML表格的外观和布局。由于描述中...
漂亮大气的表格样式
12-17
在IT行业中，尤其是在网页设计和数据展示领域，创建“漂亮大气的表格样式”是至关重要的。这不仅可以提升用户的视觉体验，还可以使数据更易于理解，提高信息传递的效率。Express CSS Table Design，作为这个主题的...
CSS实现的清爽、漂亮的表格样式分享
01-19
效果： 实现代码： 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head><... charset=gb2312″ />...CSS实现的清爽、漂亮的表格样式 – jb5t1.net</tit
CSS 表格样式
03-18
本文将深入探讨如何使用CSS来美化和定制表格样式，以提升网站的用户体验。 首先，我们要理解HTML表格的基本结构。在HTML中，`<table>`元素是创建表格的基础，而`<tr>`表示行，`<th>`表示表头单元格，`<td>`则表示...
latex调整caption字体大小
Jasmine的博客
01-26 1万+
全局caption变小，单个caption缩小，你想要的样子俺都有
latex调整caption图表标题行间距、字体大小、左对齐
热门推荐
时光如白驹过隙的博客
03-26 5万+
论文模板中设置的caption字体为五号加粗，由于标题太长，多行显示时行间距一直不对，latex小白，探索了两天终于给解决了。 问题解决 刚开始尝试修改模板，虽然也可以实现，但修改后的格式会破坏一些图表上下文之间的间距。考虑到长标题的图表并不多，因此尝试对单个图表进行修改 方法1 ：设置\captionsetup \begin{figure} \centering \subcaptionbox{}{\includegraphics[scale=0.33]{ExtendedYaleB10_data_
table折叠表格边框
生活在继续
01-22 1439
style="border-collapse: collapse"   table折叠表格边框，表格边框更美观
【HTML】table标签
林伊的博客
12-08 1980
table标签 <table></table>是表格标签 border属性设置表格边框粗细 width属性设置表格宽度 height属性设置表格高度 cellspacing 属性设置单元格间距 <tr></tr>是行标签 <th></th>是表头标签 <td></td>是单元格标签 align设置单元格文本对齐方式 <b></...
html修改th颜色,HTML <th> 标签 - HTML 颜色参考手册 - 自强学堂
weixin_39964573的博客
06-04 1244
HTML 标签实例一个简单的 HTML 表格，带有两个表头单元格和两个数据单元格：MonthSavingsJanuary$100尝试一下 »(更多实例见页面底部)浏览器支持所有主流浏览器都支持 标签。标签定义及使用说明 标签定义 HTML 表格中的表头单元格。HTML 表格有两种单元格类型：表头单元格 - 包含头部信息(由 元素创建)标准单元格 - 包含数据(由 元素创建) 元素中的文本通...
html caption属性,html元素caption标签的使用方法及作用
weixin_33293848的博客
06-04 8212
html元素caption标签是用来定义table表格的标题，其使用方法及作用详解如下：标签的定义标签定义表格的标题，该标题会默认居中在表格顶部；标签必须直接放置到标签之后；标签的align属性已被html4废弃，而HTML5已不再支持；每个表格只能用一个标签定义一个标题。标签语法格式语法格式如下：表格标题标签是成对出现的，以为开始标签，以为结束标签。浏览器支持情况标签已被所有主流浏览器支持 。标...
poi word表格 样式
05-09
要设置Word表格样式，可以按照以下步骤操作： 1. 在Word中创建表格并选中表格。 2. 在“开始”选项卡中，点击“样式”下拉菜单。 3. 选择一个表格样式。 如果需要设置自定义表格样式，可以按照以下步骤操作： 1. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

少年游四方

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

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

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

打赏作者

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

抵扣说明：

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

余额充值