当前位置： 移动技术网 > IT编程>网页制作>HTML > 39、表格

39、表格

2020年07月22日  | 移动技术网IT编程  | 我要评论

文章目录

介绍

本文是在学习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>

本文地址：https://blog.csdn.net/MoonNight608/article/details/107484294

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网