举报投诉联系我们 手机版 热门标签 名动网
您的位置：名动网 > html表格代码 HTML 表格

html表格代码 HTML 表格

2023-04-16 01:20 HTML教程

html表格代码 HTML 表格

html表格代码

HTML表格是一种用于展示数据的常见方式，它可以帮助我们更好地理解和比较数据。HTML表格由行和列组成，其中每个单元格都可以包含文本、图像或其他内容。

要创建一个 HTML 表格，首先需要使用 

 标签来定义表格，然后使用 
 标签来定义表格中的行，最后使用 
 标签来定义单元格。例如：



 
  
 
    Row 1, Cell 1 
    Row 1, Cell 2 
  
 

  
 
    Row 2, Cell 1 
    Row 2, Cell 2 
  
  

   
 
    Row 3, Cell 1 and 2  
   
  

   
  
     Heading   
   
  

 
  																     
HTML 表格


HTML 表格






HTML 表格实例




    
        

            First Name
            Last Name
            Points
        

        

            Jill
            Smith
            50
        

        

            Eve
            Jackson
            94
        

        

            John
            Doe
            80
        

        

            Adam
            Johnson
            67
        

    




    







    
     
在线实例







　表格

    
　这个例子演示如何在 HTML 文档中创建表格。


　（可以在本页底端找到更多实例。）





HTML 表格





　表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。


　HTML 表格的基本结构：


<table>…</table>：定义表格


<th>…</th>：定义表格的标题栏（文字加粗）
    




<tr>…</tr>：定义表格的行


<td>…</td>：定义表格的列





表格实例






     
实例
 
    

        
<table border="1">

        
<tr>

        
<td>row 1, cell 1</td>

        
<td>row 1, cell 2</td>

        
</tr>

        
<tr>

        
<td>row 2, cell 1</td>

        
<td>row 2, cell 2</td>

        
</tr>

        
</table>

    

    






　在浏览器显示如下：



    
        

            row 1, cell 1
            row 1, cell 2
        

        

            row 2, cell 1
            row 2, cell 2
        

    






HTML 表格和边框属性





　如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。


　使用边框属性border来显示一个带有边框的表格：



     
实例
 
    

        
<table border="1">

        
<tr>

        
<td>Row 1, cell 1</td>

        
<td>Row 1, cell 2</td>

        
</tr>

        
</table>

    

    







    





HTML 表格表头单元格





　表格的表头单元格使用<th>标签进行定义。


　表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。
    




　大多数浏览器会把表头显示为粗体居中的文本：



     
实例
 
    

        
<table border="1">

        
<tr>

        
<th>Header 1</th>

        
<th>Header 2</th>

        
</tr>

        
<tr>

        
<td>row 1, cell 1</td>

        
<td>row 1, cell 2</td>

        
</tr>

        
<tr>

        
<td>row 2, cell 1</td>

        
<td>row 2, cell 2</td>

        
</tr>

        
</table>

    

    






　在浏览器显示如下：



    
        

            Header 1
            Header 2
        

        

            row 1, cell 1
            row 1, cell 2
        

        

            row 2, cell 1
            row 2, cell 2
        

    




    





表格标题 <caption>





　在<table>标签中我们可以使用<caption> ... </ caption>标签作为标题，并在表的顶部显示出来。



    
注：此标签在较新版本的HTML / XHTML中已弃用





     
实例
 
    

        
<table border = "1">

        
<caption>这是标题</caption>

        
<tr>

        
<td>row 1, column 1</td><td>row 1, columnn 2</td>

        
</tr>         

        
<tr>

        
<td>row 2, column 1</td><td>row 2, columnn 2</td>

        
</tr>

        
</table>

    

    







    





HTML 表格高度和宽度





　在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。



     
实例
 
    

        
<table border = "1" width = "400" height = "150">

        
<tr>

        
<td>Row 1, Column 1</td>

        
<td>Row 1, Column 2</td>

        
</tr>

        
<tr>

        
<td>Row 2, Column 1</td>

        
<td>Row 2, Column 2</td>

        
</tr>

        
</table>

    

    







    





HTML 表格背景





　您可以使用以下方法之一设置 HTML 表格的背景 


    
    
  • bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
    • 
    
  • background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
    • 
    
  • bordercolor属性 - 可以设置边框颜色。
    • 




    
注：HTML5 中不推荐使用bgcolor，background和bordercolor属性。不要使用这些属性。 





     
实例
 
    

        
<body>

        
<table border = "1" bordercolor = "green" bgcolor = "yellow">

        
<tr>

        
<th>Column 1</th>

        
<th>Column 2</th>

        
<th>Column 3</th>

        
</tr>

        
</table>

        
</body>

    

    






　使用background属性需要提供图像 URL 地址：



     
实例
 
    

        
<table border = "1" bordercolor = "green" background = "/images/test.png">

        
<tr>

        
<th>Column 1</th>

        
<th>Column 2</th>

        
<th>Column 3</th>

        
</tr>

        
</table>

    

    







    





HTML 表格空间





　有以下两个属性，用于调整 HTML 表格中单元格的空间：


    
    
  • cellspacing属性-定义表格单元格之间的空间 
    • 
    
  • cellpadding属性-表示单元格边框与单元格内容之间的距离
    • 




     
实例
 
    

        
<table border = "1" cellpadding = "5" cellspacing = "5">

        
<tr>

        
<th>Name</th>

        
<th>Salary</th>

        
</tr>

        
<tr>

        
<td>其琛</td>

        
<td>5000</td>

        
</tr>

        
<tr>

        
<td>曼迪</td>

        
<td>7000</td>

        
</tr>

        
</table>

    

    









HTML 合并单元格





    
    
  • 如果要将两个或多个列合并为一个列，将使用colspan属性 
    • 
    
  • 如果要合并两行或更多行，则将使用rowspan属性。
    • 




     
实例
 
    

        
<table border = "1">

        
<tr>

        
<th>Column 1</th>

        
<th>Column 2</th>

        
<th>Column 3</th>

        
</tr>

        
<tr>

        
<td rowspan = "2">Row 1 Cell 1</td>

        
<td>Row 1 Cell 2</td>

        
<td>Row 1 Cell 3</td>

        
</tr>

        
<tr>

        
<td>Row 2 Cell 2</td>

        
<td>Row 2 Cell 3</td>

        
</tr>

        
<tr>

        
<td colspan = "3">Row 3 Cell 1</td>

        
</tr>

        
</table>

    

    







    




效果如下：



    
        

            Column 1
            Column 2
            Column 3
        

        

            Row 1 Cell 1
            Row 1 Cell 2
            Row 1 Cell 3
        

        

            Row 2 Cell 2
            Row 2 Cell 3
        

        

            Row 3 Cell 1
        

    






HTML 表格头部、主体、页脚





　表格可以分为三个部分 - 头部，主体和页脚，如同word 文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。


　头部，主体和页脚的对应的三个标签是：


    
    
  • <thead> - 创建单独的表头。
    • 
    
  • <tbody> - 表示表格的主体。
    • 
    
  • <tfoot> - 创建一个单独的表页脚。
    • 



　表可以包含多个<tbody>元素以指示不同的页面。


　但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前：



     
实例
 
    

        
<table border = "1" width = "100%">

        
<thead>

        
<tr>

        
<td colspan = "4">This is the head of the table</td>

        
</tr>

        
</thead>       

        
<tfoot>

        
<tr>

        
<td colspan = "4">This is the foot of the table</td>

        
</tr>

        
</tfoot>     

        
<tbody>

        
<tr>

        
<td>Cell 1</td>

        
<td>Cell 2</td>

        
<td>Cell 3</td>

        
<td>Cell 4</td>

        
</tr>

        
</tbody>         

        
</table>

    

    









HTML 表格的嵌套





　您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。



     
实例
 
    

        
<table border = "1" width = "100%">

        
<tr>

        
<td>

        
<table border = "1" width = "100%">

        
<tr>

        
<th>Name</th>

        
<th>Salary</th>

        
</tr>

        
<tr>

        
<td>其琛</td>

        
<td>5000</td>

        
</tr>

        
<tr>

        
<td>曼迪</td>

        
<td>7000</td>

        
</tr>

        
</table>

        
</td>

        
</tr>       

        
</table>

    

    







    







    
     
更多实例







　没有边框的表格

    
　本例演示一个没有边框的表格。


　表格中的表头 ( Heading )

    
　本例演示如何显示表格表头。


　带有标题的表格

    
　本例演示一个带标题  ( caption ) 的表格


　跨行或跨列的表格单元格

    
　本例演示如何定义跨行或跨列的表格单元格。


　表格内的标签

    
　本例演示如何显示在不同的元素内显示元素。


　单元格边距 ( Cell padding )

    
　本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。


　单元格间距 ( Cell spacing )

    
　本例演示如何使用 Cell spacing 增加单元格之间的距离。





HTML 表格标签






    
        

            标签
            描述
        

        

            <table>

            
            定义表格
        

        

            <th>

            
            定义表格的表头
        

        

            <tr>

            
            定义表格的行
        

        

            <td>

            
            定义表格单元
        

        

            <caption>

            
            定义表格标题
        

        

            <colgroup>

            
            定义表格列的组
        

        

            <col>

            
            定义用于表格列的属性
        

        

            <thead>

            
            定义表格的页眉
        

        

            <tbody>

            
            定义表格的主体
        

        

            <tfoot>

            
            定义表格的页脚
        

    




    









阅读全文









以上是名动网为你收集整理的html表格代码 HTML 表格全部内容。






声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。








相关文章












猜您喜欢



    










标签TAG









本月热门



















 © 2024 名动网 mdwl.vip   版权所有    联系我们 




桂ICP备19007206号-156 返回底部