表格样式

您所在的位置：网站首页 › 表格边框为双线 › 表格样式

表格样式

2023-11-24 07:39| 来源: 网络整理| 查看: 265

表格样式 1.表格边框任务描述相关知识代码文件 2.表格颜色、文字与大小任务描述相关知识代码文件

1.表格边框任务描述

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

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

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

相关知识

下面网页代码的表格：

HTML 页面：

通讯录姓名电话备注李雯 18012311234 家人王谦 17812311234 同事周佳 17413511234 高中同学

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

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

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

dotted: 点状；solid: 实线；double: 双线；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:

HTML – 简单表格 table { border-collapse: collapse; } th, td { padding: .5em .75em; border: 1px solid #000; } caption { font-weight: bold; margin-bottom: .5em; } tfoot { font-weight: bold; } 通讯录姓名电话备注李雯 18012311234 家人王谦 17812311234 同事周佳 17413511234 高中同学

step1/index.html:

HTML – 简单表格彩排安排时间周一周二周三上午8点开场舞歌曲串烧上午9点小品相声大型魔术上午10点杂艺表演乐队歌曲

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页面：

HTML – 简单表格运动会跑步成绩长度李雯王谦周佳 100米 14s 16s 13s 200米 26s 23s 25s 400米 70s 73s 69s 总用时 110s 112s 107s

我们设置其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:

HTML – 简单表格 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; /*表格尾部文字加粗*/ } 运动会跑步成绩长度李雯王谦周佳 100米 14s 16s 13s 200米 26s 23s 25s 400米 70s 73s 69s 总用时 110s 112s 107s

step2/index.html:

HTML – 简单表格彩排安排时间周一周二周三周四上午8点开场舞歌曲串烧上午9点小品相声大型魔术乐队歌曲上午10点杂艺表演乐队歌曲杂艺表演上午8点开场舞歌曲串烧小品相声 **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; }

【本文地址】

表格样式

表格样式

今日新闻

推荐新闻