1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <script type="text/javascript"> 9 </script> 10 <style type="text/css"> 11 table{ 12 width:300px; 13 margin:0 auto; 14 border:1px solid black; 15 /* 16 table和td边框之间默认一个距离 17 通过border-spacing属性可以设置这个距离 18 */ 19 border-spacing:5px; 20 /* 21 border-collapse可以用来设置表格的边框合并 22 如果设置了边框合并，则border-spacing自动失效 23 */ 24 border-collapse:collapse; 25 } 26 td,th{ 27 border:1px solid black; 28 } 29 tr:nth-child(even){ 30 background-color:#bfa; 31 } 32 tr:hover{ 33 background-color:#ff0; 34 } 35 </style> 36 <body> 37 <!-- 38 在HTML中，使用table标签来创建一个表格 39 --> 40 <table> 41 <!-- 42 在table标签中使用TR来表示表格中的一行，有几行就有几个tr 43 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td 44 --> 45 <tr> 46 <!-- 可以使用th标签来表示表头中的内容 47 作用和td一样 就是会有一些默认效果 加粗居中--> 48 <th>学号</th> 49 <th>姓名</th> 50 <th>住址</th> 51 </tr> 52 <tr> 53 <!-- rowspan设置纵向的合并单元 --> 54 <td rowspan="2">a1</td> 55 <td>a2</td> 56 <td>a3</td> 57 </tr> 58 <tr> 59 60 <!-- colspan横向的合并单元格 --> 61 <td colspan="2">b2</td> 62 </tr> 63 </table> 64 </body> 65 </html>
长表格
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <script type="text/javascript"> 9 </script> 10 <style type="text/css"> 11 /* 有一些情况下表格是非常长的 12 这时就需要将表格分为三个部分，表头，表格的主体，表格底部 13 thead 表头 14 tbody 表格主体 15 tfoot 表格底部 16 这三个标签的作用，就来区分表格的不同的部分，它们都是table的子标签 17 都需要直接写到table中,tr需要写在这些标签当中 18 19 thead中的内容，永远会显示在表格的头部 20 tfoot的内容，永远都会显示表格的底部 21 tbody中的内容，永远都会显示表格的中间 22 23 如果表格中没有写tbody，浏览器会自动在表格中添加tbody 24 并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素， 25 而是tbody的子元素，通过table>tr无法选中行 需要通过tbody>tr 26 */ 27 tbody>tr:nth-child(even){ 28 background-color:#bfa; 29 } 30 </style> 31 <body> 32 <table> 33 <thead> 34 <tr> 35 <th>日期</th> 36 <th>收入</th> 37 <th>支出</th> 38 <th>合计</th> 39 </tr> 40 </thead> 41 <tbody> 42 <tr> 43 <td>10.24</td> 44 <td>500</td> 45 <td>300</td> 46 <td>200</td> 47 </tr> 48 <tr> 49 <td>10.24</td> 50 <td>500</td> 51 <td>300</td> 52 <td>200</td> 53 </tr> 54 <tr> 55 <td>10.24</td> 56 <td>500</td> 57 <td>300</td> 58 <td>200</td> 59 </tr> 60 </tbody> 61 <tfoot> 62 <tr> 63 <td></td> 64 <td></td> 65 <td>合计</td> 66 <td>100</td> 67 </tr> 68 </tfoot> 69 </table> 70 </body> 71 </html>
表格布局 但是现在这种方法也被CSS淘汰
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <script type="text/javascript"> 9 </script> 10 <style type="text/css"> 11 12 </style> 13 <body> 14 <!-- 以前表格更多的情况实际上是用来对页面进行布局时， 15 但是这种方法已被CSS淘汰了 16 表格的列数由td最多的那行决定 17 表格是可以嵌套的，可以在td中在放置一个表格 18 --> 19 <table border="1" width=100% height=100%> 20 <tr height="100px"> 21 <td colspan="2"></td> 22 </tr> 23 <tr height="400px"> 24 <td width=20%></td> 25 <td> 26 <table border="1" width=100% height=100%> 27 <tr> 28 <td></td> 29 </tr> 30 <tr> 31 <td></td> 32 </tr> 33 </table> 34 </td> 35 </tr> 36 <tr height="100px" colspan="2"> 37 <td></td> 38 </tr> 39 </table> 40 </body> 41 </html>
利用table 解决高度塌陷，子元素将外边距传递给父元素的问题
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <script type="text/javascript"> 9 </script> 10 <style type="text/css"> 11 .box1{ 12 width:300px; 13 height:300px; 14 background-color:#bfa; 15 } 16 .box1:before{ 17 content:""; 18 display:table; 19 /* 规定元素应该生成的类型 20 display:table;可以将一个元素设置为表格显示 21 没有写内容这里设置为空表格 22 可以阻止子元素将外边距传递给父元素，且不会对可见框产生任何影响 23 */ 24 } 25 .box2{ 26 width:200px; 27 height:200px; 28 background-color:yellow; 29 margin-top:100px; 30 /* 31 子元素和父元素相邻的垂直外边距会发生重叠， 32 子元素的外边距会传递给父元素 33 使用空的div不能阻止父子元素的外边距 34 使用空的table能阻止父子元素的外边距，防止外边距的重叠 35 */ 36 } 37 .box3{ 38 border:10px red solid; 39 } 40 .box4{ 41 width:100px; 42 height:100px; 43 background-color:#bfa; 44 float:left; 45 } 46 /* 47 解决父元素高度塌陷 48 */ 49 .clearfix:after{ 50 content:""; 51 display:block; 52 clear:both; 53 } 54 55 /* 56 经过修改后的clearfix是一个多功能的， 57 既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠 58 */ 59 .clearfix:before, 60 .clearfix:after{ 61 content:""; 62 display:table; 63 clear:both; 64 } 65 </style> 66 <body> 67 <div class="box1"> 68 <table></table> 69 <div class="box2"> 70 </div> 71 </div> 72 <div class="box3 clearfix"> 73 <div class="box4"> 74 75 </div> 76 </div> 77 </body> 78 </html>