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