將HTML中的列數設定為跨度

WBOY
發布: 2023-09-04 22:13:02
轉載
1427 人瀏覽過

將HTML中的列數設定為跨度

我們在這篇文章中要執行的任務是在HTML中設定要跨越的列數。

當使用

元素時,可以透過使用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

讓我們來看下面的例子,其中我們使用了

標籤與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中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板