HTML-表格 - 芒果文档

📌 相关文章

📜 HTML-表格

📅 最后修改于: 2020-12-16 05:47:36 🧑 作者: Mango

HTML表允许Web作者将文本，图像，链接，其他表等数据排列到单元格的行和列中。

HTML表是使用

标记创建的，其中标记用于创建表行，而

标记用于创建数据单元。

下的元素是常规元素，默认情况下保持左对齐

例

现场演示

HTML Tables
   
    
   
      
         
            Row 1, Column 1
            Row 1, Column 2
         
         
         
            Row 2, Column 1
            Row 2, Column 2

这将产生以下结果-

在这里，边框是

标签的属性，用于在所有单元格之间放置边框。如果不需要边框，则可以使用border =“ 0”。

表格标题

可以使用

-创建一个单独的表头。

-表示表格的主体。

-创建一个单独的表页脚。

一个表可能包含几个

元素，以指示不同的页面或数据组。但值得注意的是，和标记应出现在之前

例

现场演示

HTML Table

标记定义表标题。该标签将替换

标签，该标签用于表示实际数据单元。通常，您将顶行放置为表标题，如下所示，否则，您可以在任何行中使用

元素。默认情况下，在

标记中定义的标题居中和加粗。

例

现场演示

HTML Table Header
   
    
   
      
         
            Name
            Salary
         
         
            Ramesh Raman
            5000
         
         
         
            Shabbir Hussein
            7000

这将产生以下结果-

Cellpadding和Cellspacing属性

有两个称为cellpadding和cellspacing的属性，将用于调整表格单元格中的空白。 cellspacing属性定义表单元格之间的空间，而cellpadding表示单元格边界与单元格内容之间的距离。

例

现场演示

HTML Table Cellpadding
   
    
   
      
         
            Name
            Salary
         
         
            Ramesh Raman
            5000
         
         
            Shabbir Hussein
            7000

这将产生以下结果-

Colspan和Rowspan属性

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

例

现场演示

HTML Table Colspan/Rowspan
   
    
   
      
         
            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

这将产生以下结果-

表格背景

您可以使用以下两种方式之一设置表格背景-

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

您也可以使用bordercolor属性设置边框颜色。

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

例

现场演示

HTML Table Background
   
    
   
      
         
            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

这将产生以下结果-

这是使用背景属性的示例。在这里，我们将使用/ images目录中可用的图像。

现场演示

HTML Table Background
   
    
   
      
         
            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

这将产生以下结果。这里的背景图片不适用于表格的标题。

桌子的高度和宽度

您可以使用width和height属性设置表格的宽度和高度。您可以根据像素或可用屏幕区域的百分比来指定表格的宽度或高度。

例

现场演示

HTML Table Width/Height
   
    
   
      
         
            Row 1, Column 1
            Row 1, Column 2
         
         
         
            Row 2, Column 1
            Row 2, Column 2

这将产生以下结果-

表格标题

caption标签将用作表格的标题或说明，并显示在表格的顶部。在更高版本的HTML / XHTML中不推荐使用此标记。

例

现场演示

HTML Table Caption
   
    
   
      
         This is the caption
         
         
            row 1, column 1 row 1, columnn 2
         
         
         
            row 2, column 1 row 2, columnn 2

这将产生以下结果-

表页眉，正文和页脚

桌子可以分为三部分-床头，床身和脚。头和脚与经过字处理的文档中的页眉和页脚非常相似，它们的每一页都保持不变，而正文是表的主要内容持有者。

分隔桌子的头，身体和脚的三个元素是-

This is the head of the table
This is the foot of the table
Cell 1	Cell 2	Cell 3	Cell 4

这将产生以下结果-

嵌套表

您可以在另一个表中使用一个表。不仅表，您还可以使用表数据标签

中的几乎所有标签。

例

以下是在表格单元格内使用另一个表格和其他标签的示例。

现场演示

HTML Table
   
    
   
      
         
         
            
               
                  
                     Name
                     Salary
                  
                  
                     Ramesh Raman
                     5000
                  
                  
                     Shabbir Hussein
                     7000

这将产生以下结果-