div+css製作表格

本章為大家介紹如何用div+css製作表格，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

html:

    <p>  
        </p><h2 id="花名册">花名册：</h2>  
        <p>  
            </p><p></p>  
            <p></p>  
            <p></p>  
          
        <p>  
            </p>

                   
• 序号
                           
• 姓名
                           
• 年龄
               

                      

               

                   
• footer
                   
• footer
                   
• footer
               

                      

               

                   
• 1
                   
• John
                   
• 19
               

               

                   
• 2
                   
• Mark
                   
• 21
               

               

                   
• 3
                   
• Kate
                   
• 26
               

                  

css:

ul{margin:0;padding:0;list-style:none;}  
.table{display:table;border-collapse:collapse;border:1px solid #ccc;}  
.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}  
.table-column-group{display:table-column-group;}  
.table-column{display:table-column;width:100px;}  
.table-row-group{display:table-row-group;}  
.table-row{display:table-row;}  
.table-row-group .table-row:hover,.table-footer-group .table-row:hover{background:#f6f6f6;}  
.table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}  
.table-header-group{display:table-header-group;background:#eee;font-weight:bold;}  
.table-footer-group{display:table-footer-group;}

以上就是用div+css製作表格的全部程式碼，大家可以自己試試看。