Home > Article > Web Front-end > Set number of columns in HTML to span
Set number of columns in HTML to span
- WBOYforward
- 2023-09-04 22:13:021428browse
The task we are going to perform in this article is to set the number of columns to span in HTML.
When using the
ColspanProperty
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.
grammar
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 ofExample 1
is:Example 1
In 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 ofExample 2
is:Example 2
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>
When running the above script it will generate an output containing the text used in the script along with the colspan on the web pageThe 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!