HTML|利用CSS美化一个html表格

简介: HTML|利用CSS美化一个html表格

问题描述

怎样让表格能够在任何网页页面中居中?

怎样更改表格中文本的字体和字号?

怎样能够只更改表格里的一个单元格里面的内容?

怎样让一个html的表格在边框和单元格文字中体现出层次感?

我们通常做一个表格的时候,会发现表格是左上对齐的,且表格看起来非常单调,整个页面也很简洁。我们以为表格都应该是这个样子的吗?其实不然,表格也可以在网页中体现得很有层次感、画面感。比如在表格大小,文本字体、颜色背景上都可以利用CSS来美化。

解决方案

1)表格居中

要让一个表格在网页页面居中,且不管我们在网页中怎么更改缩放比例,都不会改变这个表格居中的状态,就需要在CSS中为表格增加一个属性 {margin: 0 auto;}

3.1表格居中

table{

         margin:0  auto;

}

2)表格文本样式

利用CSS更改表格文本字体字号,可以在标签里添加一个font属性,更改字体是font-family,更改字号是font-size

3.2表格文本样式

body{

         font-size:  25px;

         font-family:  "宋体";

}

3)更改单元格内容

表格里面会有许多个单元格,然而要更改其中一个单元格的内容和样式,就需要给该单元格设置一个类名,如<td id=”Chinses”>,然后在CSS中以#Chinese{}来定义一个单元格。就以更改单元格的背景颜色做一个例子来看。

3.3单元格背景颜色

#Chinese{

         background-color:  mediumpurple;

}

4)表格最终呈现效果

3.1表格效果图

结语

在利用CSS美化一个表格时,注意给表格或单元格设置一个类名。设置属性时要分清楚各属性的准确定义,在添加属性注意使用的是花括号{}。通常我们要将表格在网页中居中体现出更直观的效果。更改背景图片时要设置图片的合理尺寸。让表格看起来更美观且有层次感。

目录
相关文章
|
17天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
2天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
6 1
|
7天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
12天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
12天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
19天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
20天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
13 0
|
24天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
26 0