CSS学习13：表格样式

文章目录

1、表格边框
2、折叠边框
3、表格的宽度和高度
4、表格的对齐方式
5、表格内边距
6、表格颜色
7、表格标题位置
8、表格综合案例

我们前面已经学习了如何制作表格，现在我们来讲讲表格的一些样式，让我们的表格更加美观。

1、表格边框

同样使用 border 属性为表格设置边框。

table,
th,
td {border: 2px solid red;
}

2、折叠边框

使用 border-collapse 属性设置是否将表格边框折叠为单一边框。

table {border-collapse: collapse;
}

3、表格的宽度和高度

使用 width 和 height 属性设置表格的高度和宽度。

table {width: 50%;
}th {height: 50px;
}

4、表格的对齐方式

通过 text-align 属性设置水平对齐方式，取值有 left（左对齐）right（右对齐）和 center（居中对齐），通过 vertical-align 属性设置垂直对齐方式，取值有：top（顶端对齐）bottom（底部对齐）和 middle（居中对齐）。

td {height: 50px;vertical-align: top;
}

5、表格内边距

通过为 td 和 th 元素设置 padding 属性，控制表格中内容和边框的距离。

td {padding: 30px;
}

6、表格颜色

通过 color 设置表格文本颜色，通过 background-color 设置表格背景颜色。

table,
td,
th {border: 1px solid blue;
}th {background-color: red;color: yellow;
}

7、表格标题位置

通过 caption-side 属性设置表格的标题位置，它的取值有：top（默认值。把表格标题定位在表格之上），bottom（把表格标题定位在表格之下）和 inherit（规定应该从父元素继承 caption-side 属性的值）。

8、表格综合案例

CSS学习13：表格样式相关推荐

Web前端开发笔记——第三章 CSS语言第四节 CSS列表、表格样式
目录一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
css实现虚线表格样式
我们在建立table的时候,会发现它会具有一些默认的样式,比如单元格td之间会有间距,所以我们通常开头是这样写的: <table border="0" cellspacing ...
css里怎么设置表格描述,css如何设置表格样式 | 睿客网
摘要 CSS表格与表单是网页上最常见的元素,表格除了显示数据外,还常常被用来排版.CSS表格作为传统的HTML元素,一直受到网页设计者们的青睐.使用CSS表格来表示数据.制作调查表等在网络中屡见不鲜. ...
表格样式css制作html5,利用css实现的表格样式展示
本文为大家展示了几款美观的表格样式,希望大家可以喜欢. 1.单像素边框CSS表格 table.gridtable { font-family: verdana,arial,sans-serif; fo ...
CSS：设置表格样式
设置前: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
WEB前端学习:CSS学习_用户界面样式
用户界面样式文章目录用户界面样式一.鼠标样式二.轮廓三.防止文本域拖拽四.去除图片底侧空白间隙五.溢出文字隐藏 1. work-break 2. white-space 3. text- ...
【温故知新】CSS学习笔记（样式表）
CSS-网页的美容师 CSS-Cascading Style Sheets 美化样式通常叫做层叠样式表(级联样式表). CSS样式引入的方式有三种(书写位置): 1.内部样式表 <head&g ...
css学习_css用户界面样式
1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...
css基础：表格样式、一级菜单、BFC浮动影响
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
CSS学习13之圆角边框及阴影
回顾盒子模型盒子模型它的学名为框模型!但是我觉得叫它盒子模型更加贴切,方便理解! CSS 框模型所有 HTML 元素都可以视为方框.在 CSS 中,在谈论设计和布局时,会使用术语"盒模 ...