css 表格 样式 CSS表格和设置表格样式

  表格

  表格在日常生活中使用的非常的多css 表格 样式，比如excel就是专门用来创建表格的工具， 表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单

  1.如何在网页中创建表格

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

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

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

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

  （4）可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果

  （5）="1" 设置表格边框显示是双线边框

  实现单线边框可以在css中给table写上属性 -:0px ;或- :;

  （6）width="40%"

  （7）align="" 设置表格居中显示 写在table中

  （8） 合并行单元格

  （9） 合并列单元格

  <pre class="kdocs-plaintext">`

  table{
    width: 500px;
    /* 设置表格居中 */
    margin: 0 auto;
    /*设置单线边框 以下两种方法必须设置在table样式里 */
    /* border-spacing:0px ; */
    border-collapse:collapse;
  }
  tr,td,th{
     /*设置边框线  border：边框线大小 边框线样式 边框线的颜色 */
    border: 1px solid red;
  }
  td{
    height: 80px;
  /* 设置文本水平居中效果 */
    text-align: center;
  /* 设置文本垂直居中效果 */
    vertical-align:middle;
  }
  /*设置隔行变色 tr:nth-child(even)*/
  tr:nth-child(2n+1){
    background-color: green;
  }
  /*需求六： 鼠标移入到tr以后，改变颜色*/
  tr:hover{
    background-color: red;
  }

  
    学号
    姓名
    性别
    住址
  
  
    1
    孙悟空
    男
    花果山
  
  
    2
    猪八戒
    男
    高老庄
  
  
    3
    沙和尚
    男
    流沙河
  
  
    4
    唐僧
    男
    女儿国
  

  2.补充

  有一些情况下表格是非常的长的，这时就需要将表格分为三个部分css 表格 样式，表头，表格的主体，表格底部

  在HTML中table为我们提供了三个标签：thead 、tbody 、tfoot

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

  并且将所有的tr都放到tbody中css 表格 样式 CSS表格和设置表格样式，所以注意tr并不是table的子元素，而是tbody的子元素

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

  文章来源:https://blog.csdn.net/qq_45902025/article/details/129263597