HTML - 表格

HTML - 表格 首页 / HTML入门教程 / HTML - 表格

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

HTML表是使用table标签创建的,其中tr标签用于创建表行,而td标签用于创建数据单元。 td下的元素是常规元素,默认情况下保持左对齐

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border="1">
         <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>
      
   </body>
</html>

这将产生以下输出-

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

表格标题

可以使用<th>标签定义表标题。 该标签将替换td标签,该标签用于表示实际数据单元。 通常,您将把第一行作为表格标题,如下所示,否则,您可以在任何行中使用<th>元素。 默认情况下,在<th>标签中定义的标题居中和加粗。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border="1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

这将产生以下输出-

Cellpadding & Cellspacing属性

有两个名为 cellpaddingcellspacing 的属性,您将使用它们来调整表格单元格中的空白。 cellspacing属性定义表单元格之间的空间,而cellpadding表示单元格边界与单元格内的内容之间的距离。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
	
   <body>
      <table border="1" cellpadding="5" cellspacing="5">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
	
</html>

这将产生以下输出-

Colspan & Rowspan属性

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <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>
   </body>
	
</html>

这将产生以下输出-

表格背景

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

  • bgcolor        属性   - 您可以为整个表格或仅为一个单元格设置背影颜色。

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

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

注意-HTML5中不推荐使用的 bgcolor ,背景和 bordercolor 属性。不要使用这些属性。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border="1" bordercolor="green" bgcolor="yellow">
         <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>
   </body>
	
</html>

这将产生以下输出-

这是使用 background 属性的示例。在这里,无涯教程将使用/images目录中可用的图像。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border="1" bordercolor="green" background="/images/test.png">
         <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>
   </body>
	
</html>

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

Width & Height

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
	
   <body>
      <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>
   </body>
	
</html>

这将产生以下输出-

表格标题

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 表格标题</title>
   </head>
	
   <body>
      <table border="1" width="100%">
         <caption>This is the 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>
   </body>
	
</html>

这将产生以下输出-

表页眉,正文和页脚

  • <thead>   - 创建一个单独的表头。

  • <tbody>   - 指示表格的主体。

  • <tfoot>    -  创建一个单独的表页脚。

一个表可能包含几个<tbody>元素,以指示不同的页面或数据组。 但值得注意的是,<thead>和<tfoot>标签应出现在<tbody>之前

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <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>
   </body>
	
</html>

这将产生以下输出-

嵌套表

您可以在另一个表中使用一个表。 不仅表,您还可以使用表数据标签<td>中的几乎所有标签。

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border="1" width="100%">
         
         <tr>
            <td>
               <table border="1" width="100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

这将产生以下输出-

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

深入浅出gRPC -〔李林锋〕

Java核心技术面试精讲 -〔杨晓峰〕

TensorFlow快速入门与实战 -〔彭靖田〕

体验设计案例课 -〔炒炒〕

陶辉的网络协议集训班02期 -〔陶辉〕

React Hooks 核心原理与实战 -〔王沛〕

高并发系统实战课 -〔徐长龙〕

快速上手C++数据结构与算法 -〔王健伟〕

结构思考力 · 透过结构看思考 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)