WEB前端开发学习----2.HTML表格table标签

浏览数：16 / 时间：2015年06月09日
[html] view plaincopy技术分享技术分享
 
  1. css没用流行之前，网页都是用表格，也就是table标签制作的。虽然现在不用table做网页了，但是我们还是应该掌握这个标签。</span>  

先给出最表格的基本格式：

[html] view plaincopy技术分享技术分享
 
  1. <table>  
  2.      <tr>  
  3.          <tb>  
  4.          </tb>  
  5.      </tr>  
  6. <table>  

  其中<tr>为行标签，即表格的行。<td>为单元格数据标签。也就是说一个表格为3行3列，则有3个<tr>标签，3个<td>标签。

 

[html] view plaincopy技术分享技术分享
 
  1. <pre name="code" class="html">        <pre name="code" class="html"><span style="white-space:pre">    </span><table border="1">  

<caption>这是个3行3列的表格</caption>



<tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第1列</td><td>第3行第2列</td><td>第3行第3列</td></tr></table>





caption属性为表格的标题。为了好看，我在这里border属性是给表格加上了边框。也可以不加，默认是没有的。


 


跨行列表格 


rowspan 跨行属性 假如跨两行则为<td rowspan="2">


colspan 跨列属性


 


 


技术分享


cellpadding 单元格的填充


cellspacing 单元格之间的空间


注意第三个表格，边框只有1px.


思路：将表格背景设为黑色，然后将单元格背景设为白色，单元格无边框，这样覆盖在表格上，且单元格之间距离为零，就可得到此效果。


代码如下：


 






[html] view plaincopy技术分享技术分享

 








      

    1. <table align="center" border="1" width="500px">  
      2. 

    2.         <caption>这是正常成绩表</caption>  
      3. 

    3.         <tr>  
      4. 

    4.             <th colspan="2">姓名</th>  
      5. 

    5.             <td align="right">小明</td>  
      6. 

    6.             <td align="right">小花</td>  
      7. 

    7.         </tr>  
      8. 

    8.         <tr>  
      9. 

    9.             <th rowspan="3">学</br>科</th>  
      10. 

    10.             <td>语文</td>  
      11. 

    11.             <td align="right">100</td>  
      12. 

    12.             <td align="right">98</td>  
      13. 

    13.         </tr>  
      14. 

    14.         <tr>  
      15. 

    15.             <td>数学</td>  
      16. 

    16.             <td align="right">96</td>  
      17. 

    17.             <td align="right">97</td>  
      18. 

    18.         </tr>  
      19. 

    19.         <tr>  
      20. 

    20.             <td>外语</td>  
      21. 

    21.             <td align="right">90</td>  
      22. 

    22.             <td align="right">100</td>  
      23. 

    23.         </tr>  
      24. 

    24.     </table>  
      25. 

    25.     <br/>  
      26. 

    26.     <table align="center" border="1" width="500px" cellspacing="0">  
      27. 

    27.         <caption>这是粗边框成绩表（1px框）</caption>  
      28. 

    28.         <tr>  
      29. 

    29.             <th colspan="2">姓名</th>  
      30. 

    30.             <td align="right">小明</td>  
      31. 

    31.             <td align="right">小花</td>  
      32. 

    32.         </tr>  
      33. 

    33.         <tr>  
      34. 

    34.             <th rowspan="3">学</br>科</th>  
      35. 

    35.             <td>语文</td>  
      36. 

    36.             <td align="right">100</td>  
      37. 

    37.             <td align="right">98</td>  
      38. 

    38.         </tr>  
      39. 

    39.         <tr>  
      40. 

    40.             <td>数学</td>  
      41. 

    41.             <td align="right">96</td>  
      42. 

    42.             <td align="right">97</td>  
      43. 

    43.         </tr>  
      44. 

    44.         <tr>  
      45. 

    45.             <td>外语</td>  
      46. 

    46.             <td align="right">90</td>  
      47. 

    47.             <td align="right">100</td>  
      48. 

    48.         </tr>  
      49. 

    49.     </table>  
      50. 

    50.     <br/>  
      51. 

    51.     <table align="center" bgcolor="black" width="500px" cellspacing="1">  
      52. 

    52.         <caption>这是细边框成绩表（1px框）</caption>  
      53. 

    53.         <tr>  
      54. 

    54.             <th bgcolor="white" colspan="2">姓名</th>  
      55. 

    55.             <td bgcolor="white" align="right">小明</td>  
      56. 

    56.             <td bgcolor="white" align="right">小花</td>  
      57. 

    57.         </tr>  
      58. 

    58.         <tr>  
      59. 

    59.             <th bgcolor="white" rowspan="3">学</br>科</th>  
      60. 

    60.             <td bgcolor="white">语文</td>  
      61. 

    61.             <td bgcolor="white" align="right">100</td>  
      62. 

    62.             <td bgcolor="white" align="right">98</td>  
      63. 

    63.         </tr>  
      64. 

    64.         <tr>  
      65. 

    65.             <td bgcolor="white">数学</td>  
      66. 

    66.             <td bgcolor="white" align="right">96</td>  
      67. 

    67.             <td bgcolor="white" align="right">97</td>  
      68. 

    68.         </tr>  
      69. 

    69.         <tr>  
      70. 

    70.             <td bgcolor="white">外语</td>  
      71. 

    71.             <td bgcolor="white" align="right">90</td>  
      72. 

    72.             <td bgcolor="white" align="right">100</td>  
      73. 

    73.         </tr>  
      74. 

    74.     </table>  
      75. 




          

            

              
              郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
            

          


          


          

            标签： 
            class
            
            style
            
            代码
            
            src
            
            log
            
            html
            
            http
            
            数据
            
            si
            
            class
            
            style
            
            代码
            
            src
            
            log
            
            html
            
            http
            
            数据
            
            si
            
            
            
          


          

            

              
相关文章

              
    
                
              

            

            

              
随机文章

              
            

          



          

            

              
您可能还喜欢

              
    
                
              

            


            

              
您可能还喜欢