将HTML中的列数设置为跨度-html教程-PHP中文网

将HTML中的列数设置为跨度

WBOY

发布： 2023-09-04 22:13:02

转载

1781人浏览过

将html中的列数设置为跨度

我们在这篇文章中要执行的任务是在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

以上就是将HTML中的列数设置为跨度的详细内容，更多请关注php中文网其它相关文章！