介绍
本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记
表格
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
1、colspan 横向合并单元格
2、rolspan 纵向合并单元格
可以将一个表格分成三个部分
头部 thead
主体 tbody
底部 tfoot
th 表示头部的单元格
</style>
<body>
<div class="box1">
</div>
</body>
</html>
表格样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
table{
width:50%;
border:1px solid black;
margin:0 auto
1、指定边框之间的距离
border-spacing:1px;
2、设置边框的合并:collapse 设置边框合并
border-collspse: collapse
}
td{
border:1px solid black;
height:100px;
3、默认情况下,元素在td中是垂直居中的,可以通过vertical-align设置
text-align 水平居中
(不仅文字,元素在td中都会受到影响)
可以利用该性值设置元素垂直居中
vertical-align:top;
}
4、如果表格中没有使用tbody,而直接使用tr,那么浏览器就会自动创建
一个tbody,并且将所有的tr全部放到tbody中。
tr不是table的子元素。table的子元素为thead tbody tfoot
// 设置奇数行颜色
tr:nth-child(odd){
background-color:#bfa
}
.box1{
width:300px;
height:300px;
/*
将元素设置为单元格
*/
display:table-cell;
/*
设置box2垂直居中
*/
vertical-align:middle
}
.box2{
width:100px;
height:100px;
//设置水平居中
margin:0 auto;
}
</style>
<body>
<div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
</table>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>