• 中文
    • English
  • 注册
  • 查看作者
    • 8:CSS表格

      一.  创建表格

      使用table标签创建一个表格。

      • tr表示表格中的一行(一个表格中 有几行,就有几个tr标签)

      • th表示表格的表头(一个表格中 有几列,就可以设置几个th标签)

      • td表示表格中的一个单元格(一个表格中n行, m列,就有n行 * m个td标签)

      • tr中可以包含一个或多个td 

      二.  设置表格边框

      一般table、td、th标签都会设置边框,然后将table的边框间距设置为0,并且合并边框。如果边框间距设置的值>0,则不要再设置合并边框。

      table{
          width: 40%;
          border: 1px #000 solid;
          border-spacing: 0; /*设置相邻单元格的边框间的距离为0*/
          border-collapse: collapse;/*合并边框*/
      }
      td,th{
          border: 1px #000 solid;
      }

      三.  表格隔行换色

      巧记:odd,三个字母,所以是奇数换色。even,4个字母,所以是偶数换色

      /*奇数换色*/
      tr:nth-child(odd){
          background-color: #D9E1F2;
      }
      
      /*偶数换色*/
      tr:nth-child(even){
          background-color: #D9E1F2;
      }
      
      /*鼠标悬浮时换色*/
      tr:hover{
      background-color: yellowgreen;
      }

      四.  合并单元格

      合并单元格可以通过在th和td中设置属性来完成。

      • 横向合并:colspan

      • 纵向合并:rowspan

      <table>
      			
      			<thead>
      				<tr>
      					<th>姓名</th>
      					<th>性别</th>
      				</tr>
      			</thead>
      			
      			<tbody>
      				<tr>
      					<td>张甲</td>
      					<td>张洁</td>
      				</tr>
      				<tr>
      					<td>男</td>
      					<td>女</td>
      				</tr>	
      			</tbody>
      			<caption> 表格标题 </caption>
      			<tfoot>
      				<tr>
      					<td colspan="2">汇总</td>
      					
      					<!--<td>汇总</td> -->
      				</tr>
      			</tfoot>
      		</table>

      五.  表格其他样式

      之前学过的很多属性都可以用来设置表格的样式,比如color可以设置文本的颜色,padding可以设置内容和表格边框的距离。

      • text-align:设置文字的水平对齐方式

      • vertical-align:设置文字的垂直对齐方式

      • border-spacing:边框间距

      • border-collapse:合并边框

      • collapse:合并边框

      • separate:不合并边框

      山东省·济南市
    • 0
    • 0
    • 0
    • 1.5k
    • 十二

      请登录之后再进行评论

      登录

      赞助本站

      • 支付宝
      • 微信
      • QQ

      感谢一直支持本站的所有人!

      单栏布局 侧栏位置: