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

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:吴怡辰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端 | 设置隔行变色的单元格

    表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单。在网页中也可以来创建出不...

    算法与编程之美
  • 网页|HTML表格制作

    在我们学习工作想要做出一个表格的时候,我们通常会直接打开Excel,但其实,使用html进行表格制作时,更能体会到敲代码的魅力。

    算法与编程之美
  • Java|Java生成Excel表

    最近遇到一个问题,就是在系统页面上加一个Excel表格导出的问题,这个问题很好解决啊,写一个JS把后台给的数据导出到Excel表格不就行了吗。然而当我们在测试的...

    算法与编程之美
  • Hyperledger Fabric与其他块链实现有何不同?

    [表格]

    首席架构师智库
  • 世界著名期刊杂志里的表格样式

    我自己制作过不少糟糕的表格,也见过更多不规范的表格样式,其不专业的形态有很多种,不一而足。整体上看,这些不规范的表格,主要表现为结构混乱、逻辑不清以及外观粗糙。

    Lenis
  • 前端 | 设置隔行变色的单元格

    表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单。在网页中也可以来创建出不...

    算法与编程之美
  • HTML标记语法之表格元素

    8.直列化格式:<colgroup><colgroup>(<col>与<colgroup>的功能完全一样)

    阿豪聊干货
  • 【干货】如何提升Excel表格的颜值?

    下载了几个歪果仁做的Excel表格,非常的漂亮: ? ? 再看看我们最常见的表格,难看的瞬间爆表 ? 兰色对歪果仁的表格好看的原因进行了归纳,下面我们按歪果仁...

    钱塘数据
  • 为什么歪果仁的Excel表格这么漂亮?

    兰色说:其实Excel漂亮并不意味着花梢,表格设计就是要突出和展示数据,达到这个目的,又能看上去很舒服。就是完美又好看的Excel表格。

    华章科技
  • H5 学习从0到1-H5表格(7)

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券