Html+CSS完成表格

最近在学习HTML、CSS在学习表格

标签时,发现HTML标签本身并不能修饰好看的表格,这时候需要CSS上场了,此处为内嵌CSS,CSS代码需要写在之间,table为类选择器,满足所有与table有关的标签。没有采用CSS之前如图,可以发现很丑

Html+CSS完成表格_第1张图片

[html]  view plain  copy
  1. >  
  2. <html>  
  3. <head>  
  4.     <title>tabletitle>  
  5.     <style type="text/css">  
  6.         table {/*样式实现表格居中*/  
  7.                             border-collapse:collapse;  
  8.                 width:600px;  
  9.                 margin-bottom: 0px;  
  10.                 margin-top: 0px;  
  11.                 margin-right:auto;  
  12.                 margin-left: auto;  
  13.                 text-align: center;  
  14.                 }  
  15.     style>  
  16. head>  
  17. <body>  
  18.       
  19. <table border="1">  
  20.     <caption>纵向表格caption>    
  21.     <tr>  
  22.         <td>姓名td>  
  23.         <td>小丽td>       
  24.     tr>  
  25.     <tr>  
  26.         <td>电话td>  
  27.         <td>123td>      
  28.     tr>  
  29.     <tr>  
  30.         <td>性别td>  
  31.         <td>td>  
  32.     tr>  
  33.       
  34.       
  35. <table border="1">  
  36.     <caption>横向表格caption>    
  37.     <tr>  
  38.         <td>姓名td>  
  39.         <td>电话td>  
  40.         <td>性别td>  
  41.     tr>  
  42.     <tr>  
  43.     <td>小丽td>  
  44.     <td>123td>  
  45.     <td>td>  
  46.     tr>  
  47. table>  
  48. body>  
  49. html>  

最后结果,整个表格都好看起来

Html+CSS完成表格_第2张图片

总结:1.当table表格的标记描述border值大于0时,显示边框,如果border值为0,则不显示边框。

若是只想将表格边框进行修饰。CSS3可以采用border-collapse属性,语法格式:

[html]  view plain  copy
  1. border-collapse:separate|collapse  

其中separate是默认值,表示边框会分开,不会忽略border-spacing和empty-cells属性,而collapse表示边框会合并为一个单一的边框。

你可能感兴趣的:(Html+CSS完成表格)