Tetapkan bilangan lajur dalam HTML untuk menjangkau-html tutorial-php.cn

Tetapkan bilangan lajur dalam HTML untuk menjangkau

WBOY

Lepaskan： 2023-09-04 22:13:02

ke hadapan

1445 orang telah melayarinya

Tetapkan bilangan lajur dalam HTML untuk menjangkau

Tugas yang akan kami laksanakan dalam artikel ini adalah untuk menetapkan bilangan lajur untuk span dalam HTML.

Apabila menggunakan elemen

ini boleh dicapai dengan menggunakan atribut colspan. Oleh itu, sel jadual tunggal kini boleh merentangi berbilang lajur atau lebar sel. Mari pergi ke artikel untuk mengetahui lebih lanjut tentang atribut colspan.

Atribut Colspan

Dalam HTML, bilangan lajur sel harus span ditentukan oleh atribut colspan. Ia membenarkan sel jadual tunggal menjangkau berbilang lajur atau sel. Ia menyediakan fungsi yang sama seperti program hamparan seperti ciri "Gabung Sel" Excel.

Tatabahasa

Berikut ialah sintaks atribut colspan.

<td colspan="number">

Salin selepas log masuk

Mari kita menyelami contoh berikut untuk lebih memahami sifat colspan.

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Dalam contoh berikut, kami menggunakan colspan untuk menggabungkan sel jadual.

<!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>

Salin selepas log masuk

Apabila skrip dilaksanakan, ia akan menghasilkan output yang menunjukkan jadual yang terdiri daripada data yang diberikan dalam skrip bersama-sama dengan colspan daripada jumlah amaun pada halaman web.

Terjemahan bahasa Cina bagi

Contoh 2

ialah:

Contoh 2

Mari lihat contoh berikut di mana kami telah menggunakan tag

<!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>

Salin selepas log masuk

Apabila menjalankan skrip di atas, ia akan menghasilkan output yang mengandungi teks yang digunakan dalam skrip bersama-sama dengan colspan pada halaman web

Atas ialah kandungan terperinci Tetapkan bilangan lajur dalam HTML untuk menjangkau. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!