HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML タグ


タグは、テーブル内の1つまたは複数の列のグループです。すべての列のスタイルを設定します。

以下は、 タグ-

の属性です。
  • スパン −列グループがスパンする必要がある列の数は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;">

  1. HTML<center>タグ

    HTMLのcenterタグは、テキストを中央揃えにするために使用されます。 注 :タグはHTML5ではサポートされていません。 CSSの使用をお勧めします。 ここで、HTMLでcenterタグを実装する例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> table, th, td {    border: 2px solid blue; } </style> </head> <body> <table>   &nbs

  2. HTML<th>colspan属性

    要素のcolspan属性は、ヘッダーセルがまたがる列の数を設定するために使用されます。 以下は構文です- <th colspan="num"> 上記のnumは、ヘッダーセルがまたがる列の数です。 ここで、要素-のcolspan属性を実装する例を見てみましょう。 例 <!DOCTYPE html> <html> <head> <style> table, th, td {    border: 2px solid green; } </style> </head> &