HTML <colgroup> แท็ก

แท็ก คือกลุ่มของคอลัมน์อย่างน้อยหนึ่งคอลัมน์ในตาราง มันกำหนดสไตล์สำหรับคอลัมน์ทั้งหมด

ต่อไปนี้เป็นแอตทริบิวต์ของแท็ก −

ช่วง − จำนวนคอลัมน์ที่กลุ่มคอลัมน์ควรขยายถูกกำหนดด้วยแอตทริบิวต์ span

ตัวอย่าง

เรามาดูตัวอย่างการใช้แท็ก −

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span="3" style="background-color:gray;">
      <col style="background-color:orange;">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML colgroup
แท็ก

ในตัวอย่างข้างต้น เราได้กำหนดรูปแบบมากกว่าหนึ่งคอลัมน์ −

<colgroup>
<col span="3" style="background-color:gray;">
<col style="background-color:orange;">
</colgroup>

เราได้กำหนดรูปแบบสีพื้นหลังสีเทาสำหรับ 3 คอลัมน์แรกด้านบนในองค์ประกอบ -

<col span="3" style="background-color:gray;">

คอลัมน์ที่เหลือกำหนดรูปแบบสีพื้นหลังสีส้ม -

<col style="background-color:orange;">

HTML แท็ก

ตัวอย่าง

ผลลัพธ์