css 表格

1. 在现实生活中，我们经常需要使用表格来表示一些格式化数据：
课程表、人名单、成绩单....

同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格
2.<table border="1" width='50%' align="center">
<!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
3. <!-- rowspan 纵向的合并单元格 -->
<td rowspan="2">D2</td>
colspan 横向的合并单元格
-->
<td colspan="2">C4</td>

 

长表格

1. 可以将一个表格分成三个部分：
头部 thead
主体 tbody
底部 tfoot

th 表示头部的单元格

 

表格的样式

1./* border-spacing: 指定边框之间的距离 */
/* border-spacing: 0px; */
2. /* border-collapse: collapse; 设置边框的合并 */
border-collapse: collapse;
3。/* 默认情况下内容在td中是垂直居中的 可以通过 vertical-align 来修改*/
vertical-align:middle;
父元素中的内容，设置text-align: center; 文本水平居中
子元素设置，margin: 0 auto; 子元素水平居中
4. 如果表格中没有使用tbody而是直接使用tr，
那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
tr不是table的子元素
tbody > tr:nth-child(odd){
background-color: #bfa;
}
5.将普通的块父元素，设置 /* 将元素设置为单元格 td */
display: table-cell;
vertical-align: middle;
子元素垂直居中。然后子元素设置子元素设置，margin: 0 auto; 子元素水平居中，则子元素在父元素内在正中间