html设置表格字体样式表,CSS：表格样式（设置表格边框/文字/背景的样式）

2024-04-21 21:34:14

使用CSS可以制作出十分精美的表格。

效果图：

代码：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS 表格样式

body {background-color:#e8e8e8}

/*text-align 属性设置水平对齐方式，vertical-align 属性设置垂直对齐方式*/

table,th,td {border:1px solid blue;text-align:center}

table.singlineBorder {border-collapse:collapse;} /*单线条边框的表格*/

table.widthPercent30 {width:30%}

th.height50px {height:50px}

td.greenBg {color:#00aa00;background-color:#ccc}

/*一个精美的表格*/

table.niceTable

{

width:30%;

border-collapse:collapse;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

}

table.niceTable td,table.niceTable th

{

padding:3px 7px 2px 7px;

border:1px solid #98bf21;

}

table.niceTable th

{

color:white;

background-color:#A7C942;

}

table.niceTable tr.light td {background-color:#EAF2D3;}

(一)蓝色边框的表格

省份	面积
黑龙江	47.2
辽宁	11.6

(二)单线条边框的表格

省份	面积
黑龙江	47.2
辽宁	11.6

(三)表格宽度30%，高度50px，设置字体颜色和背景颜色

省份	面积
黑龙江	47.2
辽宁	11.6

(四)一个漂亮的表格

省份基本信息
省份	省会	面积	人口	GDP
黑龙江	哈尔滨	47.2	4900	16000
吉林	长春	11.6	2600	27000
辽宁	沈阳	12.6	4500	27000
河北	石家庄	29.1	5200	26000

html设置表格字体样式表,CSS：表格样式（设置表格边框/文字/背景的样式）相关推荐

【Python】解决Django Admin管理界面样式表(CSS Style)丢失问题
[Python]解决Django Admin管理界面样式表(CSS Style)丢失问题参考文章: (1)[Python]解决Django Admin管理界面样式表(CSS Style)丢失问题 ( ...
引入方式之行内样式表(CSS、HTML)
引入方式之行内样式表(CSS.HTML) <!DOCTYPE html> <html lang="en"><head><meta char ...
QT样式表中透明度参数设置
透明度设置在样式表中,WindowOpacity 可以设置透明度.但是仅能设置 QMainWindow,若想设置其它部件(button,label,widget等)的透明度,可以采用rgba的颜色 ...
css-day01笔记-CSS初识、基础选择器、文字和文本样式
typora-copy-images-to: media 第01阶段.web基础:css-day01笔记-CSS初识.基础选择器.文字和文本样式一.CSS层叠样式表学习目标理解 css的目的作用 ...
html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
html链接外部css样式表,CSS外部样式表是什么？
当Web浏览器加载网页时,它的显示方式取决于来自级联样式表的信息,HTML文件有三种使用样式表的方法:外部,内部和内联. 内部和内嵌样式表存储在HTML文件本身中.它们很容易在当下工作,但由于它们不是 ...
php设置表单的字体,php表单标题怎么设置字体
php表单标题怎么设置字体关于网页字体的设置我们可以使用css样式来做,具体的属性是font-family.下面来看看怎么设置form表单的标题吧. 1.首先form里有一个h2标签,用来显示for ...
CSS级联样式表-css选择器
CSS概念 Cascading Style sheet 级联样式表表现HTMl或XHTML文件样式的计算机语言包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定建议:把表示样式的代码从 ...

最新文章

热门文章