表格表单的介绍

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，

表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单

在网页中也可以来创建出不同的表格。

1、在HTML中，使用table标签来创建一个表格

2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr

3、在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

4、border="1" width="40%" align="center"

5、rowspan 合并行单元格

6、colspan 合并列单元格

/*需求一、设置表格的宽度，表格居中中，边框 */

table{

width: 500px;

/* 需求四、设置边框线 border：边框线大小 边框线样式 边框线的颜色 */

border: 1px solid red;

/* 设置表格居中 */

margin: 0 auto;

/*需求二： 设置单线边框 以下两种方法必须设置在table样式里 */

/* border-spacing:0px ; */

border-collapse:collapse;

/*需求三：设置背景色样式*/

background-color: pink;

}

tr,td,th{

border: 1px solid red;

}

td{

height: 80px;

/* 需求七：调整td文字在表格中的位置 vertical-align、text-align*/

/* 设置文本水平居中效果 */

text-align: center;

/* 设置文本垂直居中效果 */

vertical-align:middle;

}

/* 需求五： 设置隔行变色 tr:nth-child(even)*/

tr:nth-child(2n+1){

background-color: green;

}

/*需求六： 鼠标移入到tr以后，改变颜色*/

tr:hover{

background-color: red;

}

/* 需求二： 设置表格的边框，要单线边框 */

/* 方法一 */

/* border-spacing:0px ; */

/*方法二*/

/* border-collapse [kə'læps] 可以用来设置表格的边框合并

如果设置了边框合并，则border-spacing自动失效 */