原本这只是一个用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代码的分离
- css注释的快捷键 ctrl+alt+/ 形式为/* 注释内容 */ ，并且注释内容最好与注释符号留有空格。
<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; 是设置单元格边框合并
如果单元格边框不合并 效果如下：
