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