HTML基础（四）表格

定义和用法

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

创建一个两行三列的表格

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
   <table>
       <tr>
           <td>2017</td>
           <td>2018</td>
           <td>2019</td>
       </tr>
       <tr>
           <td>6000</td>
           <td>8000</td>
           <td>10000</td>
       </tr>
   </table>
</body>
</html>
View Code
复制代码

如果要给表格加上边框，就要在table标签里加上border属性

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
   <table border="1">
       <tr>
           <td>2017</td>
           <td>2018</td>
           <td>2019</td>
       </tr>
       <tr>
           <td>6000</td>
           <td>8000</td>
           <td>10000</td>
       </tr>
   </table>
</body>
</html>
View Code
复制代码

这样就给表格加上了1像素的边框

带表头的表格



<th>…</th>    <!– 表格头，内容居中、加粗显示-->




带标题的表格，要放在table标签的下面，


一个表格只能定义一个标题




<table>
    <caption>…</caption>   <!– 表格标题，居中显示-->
</table>




 带结构的表格


不影响布局，但是当表格比较多的时候，不用等到所有表格加载完才显示，会分块显示


复制代码


表格划分三部分：表头、主体、脚注
• thead：表格的头 （放标题之类内容）
• tbody：表格的主体 （放数据本体）
• tfoot：表格的脚 （放表格的脚注）


<table>
    <caption>…</caption>
    <thead>
        <tr>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>主体</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>脚注</td>
        </tr>
    </tfoot>
</table>


复制代码


表格属性


table的属性


复制代码


table标签除了具有html元素中通用的属性外，还含有自己的属性，常用属性如下：

bgcolor：规定表格边框的宽度。

cellpadding：规定单元边沿与其内容之间的空白，一个单元格的大小

cellspacing：规定单元格之间的空白。

frame：规定外侧边框的哪个部分是可见的。

rules：规定内侧边框的哪个部分是可见的。

summary：规定表格的摘要。

width：规定表格的宽度。


复制代码


frame属性


复制代码


void    不显示外侧边框。
above   显示上部的外侧边框。
below   显示下部的外侧边框。
hsides  显示上部和下部的外侧边框。
vsides  显示左边和右边的外侧边框。
lhs     显示左边的外侧边框。
rhs     显示右边的外侧边框。
box     在所有四个边上显示外侧边框。
border  在所有四个边上显示外侧边框


复制代码


rules属性




none     没有线条。
groups   位于行组和列组之间的线条。
rows     位于行之间的线条。
cols     位于列之间的线条。
all      位于行和列之间的线条。




tr标签属性


 




td和th标签属性




<thead>、<tbody>和<tfoot>标签属性


 


跨列属性colspan


复制代码




<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
   <table border="1">
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
        <tr>
            <td>444</td>
            <td>555</td>
            <td>666</td>
        </tr>
    </table>
</body>
</html>



View Code
复制代码


合并


复制代码


<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
   <table border="1">
        <tr>
            <td colspan="2">111</td>
            <td>333</td>
        </tr>
        <tr>
            <td>444</td>
            <td>555</td>
            <td>666</td>
        </tr>
    </table>
</body>
</html>


复制代码


跨行属性rowspan


复制代码


<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
   <table border="1">
        <tr>
            <td rowspan="2">111</td>
            <td>222</td>
            <td>333</td>
        </tr>
        <tr>
            <td>555</td>
            <td>666</td>
        </tr>
    </table>
</body>
</html>


复制代码


表格嵌套


复制代码


<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
   <table border="1">
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
        <tr>
            <td>444</td>
            <td>
                <table border="1">
                    <tr>
                        <td>aaa</td>
                        <td>bbb</td>
                        <td>ccc</td>
                    </tr>
                    <tr>
                        <td>ddd</td>
                        <td>eee</td>
                        <td>fff</td>
                    </tr>
                </table>
            </td>
            <td>666</td>
        </tr>
    </table>
</body>
</html>


复制代码


小练习


完成以下表格样式




复制代码




<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <table border="5" width="500px" align="center" cellspacing="0" cellpadding="10">
        <caption>互联网工资</caption>
        <thead align="center">
            <tr bgcolor="green">
                <th rowspan="2">城市</th>
                <th colspan="2">2017年</th>
                <th rowspan="2">2018年</th>
                <th rowspan="2">2019年</th>
            </tr>
        <tr bgcolor="green">
            <td>上半年</td>
            <td>下半年</td>
        </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td bgcolor="#deb887">甘肃</td>
                <td>5500</td>
                <td>4550</td>
                <td>9900</td>
                <td>7200</td>
            </tr>
            <tr>
                <td bgcolor="#deb887">浙江</td>
                <td>9000</td>
                <td>6666</td>
                <td>1200</td>
                <td>3000</td>
            </tr>
        </tbody>
        <tfoot align="center">
                <tr >
                <td bgcolor="#deb887">上海</td>
                <td>1000</td>
                <td>5555</td>
                <td>4000</td>
                <td>8000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>



View Code
复制代码


 






            

            
posted @ 
 
邹邹很busy。 
阅读(724) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· 记一次.NET内存居高不下排查解决与启示
    

· 探究高空视频全景AR技术的实现原理
    

· 理解Rust引用及其生命周期标识（上）
    

· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
    

· 没有源码，如何修改代码逻辑？
    



    

    阅读排行：
    

 ·          分享4款.NET开源、免费、实用的商城系统
        

 ·          全程不用写代码，我用AI程序员写了一个飞机大战
        

 ·          MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
        

 ·          白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
        

 ·          上周热点回顾（2.24-3.2）
        



    

    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
目录导航