通过css润色html表格
原本这只是一个用html编写的干瘪难看的表格：
<body>
<h1>创建一个3*3的表格</h1>
<table>
<tr>
<!--th和td都是单元格，th里的内容会默认加粗并且居中 -->
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>男</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>小红</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
- 通过添加CSS层叠样式表 对上面那个表进行修饰和渲染，能让它好看一些
- css引用的两种方式：
- 1.放在<style type="text/css" > css代码 </style> ， 实现了css和body的分离。
- 2.通过<link href="text/css" / > ，在另外一个新建的css文件中 写css代码， 彻底实现了css代码 和 html代码的分离
<style type="text/css">
/* css注释（注释内容和注释符号之间最好用空格隔开 */
table{
/* 设置单元格边框合并 */
border-collapse: collapse;
/* 为表格设置宽度 */
width: 70%;
/* 为表格设置背景颜色 */
background: green;
/* 设置表格左右外边距始终相等，表格就会水平方向上居中显示 */
margin-left:auto;
margin-right:auto;
}
td,th{/* 选中当前网页中的所有td和th元素 */
/* 为单元格设置边框（宽度，样式，边框颜色 */
border:2px solid red;
/* 设置单元格边框与内容之间的距离 */
padding:25px;
}
h1{
border:2px solid blue;
/* 设置元素内容在水平方向上居中 */
text-align:center;
}
</style>
这样是不是高档了很多。
border-collapse: collapse; 是设置单元格边框合并
如果单元格边框不合并 效果如下：
相关推荐
jiedinghui 2020-10-25
Ladyseven 2020-10-22
zuncle 2020-09-28
xiaohuli 2020-09-02
葉無聞 2020-09-01
nicepainkiller 2020-08-20
AlisaClass 2020-08-09
myloveqiqi 2020-08-09
buttonChan 2020-08-02
drdrsky 2020-07-29
Ladyseven 2020-07-25
nicepainkiller 2020-07-24
AlisaClass 2020-07-19
hellowzm 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 2020-07-19
骆驼的自白 2020-07-18
lanzhusiyu 2020-07-19
hellowzm 2020-07-19
CSSEIKOCS 2020-07-18