将HTML中的列数设置为跨度

来自:互联网
时间:2023-09-04
阅读:

我们在这篇文章中要执行的任务是在HTML中设置要跨越的列数。

当使用<td>元素时,可以通过使用colspan属性来实现。因此,一个单独的表格单元格现在可以跨越多个列或宽度的单元格。让我们进入文章了解更多关于colspan属性的信息。

Colspan属性

在HTML中,单元格应该跨越的列数是由colspan属性指定的。它使得单个表格单元格可以跨越多个列或单元格。它提供了与电子表格程序(如Excel的“合并单元格”功能)相同的功能。

语法

下面是colspan属性的语法。

<td colspan="number">

让我们深入以下示例,更好地理解colspan属性。

Example 1

的中文翻译为:

示例1

在以下示例中,我们使用colspan来进行表格的合并单元格。

<!DOCTYPE html>
<html>
<head>
    <style>
       body {
           text-align: center;
           
       }
       table,
       tbody,
       td {
           border: 1px solid black;
           border-collapse: collapse;
           
       }
	</style>
</head>
<body>
   <table>
      <tr>
         <th>NAME</th>
          <th>Amount</th>
      </tr>
      <tr>
          <td>Surya</td>
          <td>143</td>
      </tr>
      <tr>
          <td>Karthik</td>
          <td>420</td>
      </tr>
      <tr>
          <td colspan="2">Total Amount : 563</td>
      </tr>
   </table>
</body>
</html>

当脚本被执行时,它将生成一个输出,显示由脚本中给定的数据组成的表格,同时在网页上显示总金额的colspan。

Example 2

的中文翻译为:

示例2

让我们来看下面的例子,其中我们使用了<article>标签与colspan一起使用。

<!DOCTYPE html>
<html>
<head>
   <style>
      article {
          columns: 3;
      }
      h1 {
          column-span: all;
      }
   </style>
</head>
<body>
   <article>
      <h1>spanning all of the columns</h1>
      <p>Mahendra Singh Dhoni is an Indian former professional cricketer who was captAIn of the Indian national cricket team in limited-overs formats</p>
      <p>Virat Kohli is an Indian international cricketer and former captain of the India national cricket team.He plays for Delhi in domestic cricket</p>
      <p>Hardik Himanshu Pandya is an Indian international cricketer who plays for the India national cricket team at the international level and the Baroda cricket team domestically.</p>
   </article>
</body>
</html>

在运行上述脚本时,它将生成一个输出,其中包含脚本中使用的文本以及网页上的colspan
返回顶部
顶部