The task we are going to perform in this article is to set the number of columns to span in HTML.
When using the
In HTML, the number of columns a cell should span is specified by the colspan attribute. It allows a single table cell to span multiple columns or cells. It provides the same functionality as spreadsheet programs such as Excel's "Merge Cells" feature.
The following is the syntax of the colspan attribute.
<td colspan="number">
Let’s dive into the following example to better understand the colspan attribute.
The Chinese translation ofIn the following example, we use colspan to merge cells of the table.
<!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>
When the script is executed, it will generate an output showing a table consisting of the data given in the script, along with a colspan of the total amount on the web page.
The Chinese translation of Let’s look at the following example where we are using the
<!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>
The above is the detailed content of Set number of columns in HTML to span. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
