表格 基础

1、表格

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

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

<table>
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
</ table>

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

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

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

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

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

 5、rowspan  合并行单元格

 6、colspan  合并列单元格

2、表格样式

  1、设置表格的宽度
        width:   ;

   2、 设置边框线  border：边框线大小 边框线样式 边框线的颜色
        border: 1px solid red;

   3、设置表格居中
        margin: 0 auto;
   4、设置水平居中
        text-align: center;
   5、设置垂直居中
        vertical-align:middle;

   6、设置表格的边框，要单线边框 以下两种方法必须设置在table样式里
        方法一：border-spacing:0px ; 
        方法二：border-collapse:collapse;
                可以用来设置表格的边框合并
                如果设置了边框合并，则border-spacing自动失效

    7、设置背景色样式
         background-color: pink;

    8、设置隔行变色

          :nth-child(   )

    9、鼠标移入以后，改变颜色

           :hover

3、长表格

有一些情况下表格是非常的长的，

  这时就需要将表格分为三个部分，（thead）表头，(tbody)表格的主体，(tfoot)表格底部

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

通过table > tr 无法选中行 需要通过tbody > tr