HTMLのth要素におけるcolspan属性の使い方をわかりやすく解説
<th>要素のcolspan属性は、見出しセル（ヘッダーセル）が横方向にまたぐ列の数を指定するために使用されます。テーブルで複数の列にまたがる見出しを作成したい場合に便利な属性です。
colspan属性の基本構文
colspan属性の書き方は以下のとおりです。
<th colspan="num">
ここで「num」には、見出しセルがまたぐ列の数（正の整数）を指定します。たとえば「2」を指定すれば、その見出しセルは2列分の幅を持つことになります。
実装例
それでは、<th>要素のcolspan属性を実装した具体的な例を見てみましょう。以下のコードでは、商品経費の一覧表を作成し、見出しセルと合計行にcolspan属性を適用しています。
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid green;
}
</style>
</head>
<body>
<h2>Product Expenses</h2>
<table>
<tr>
<th colspan="2">Expenses</th>
</tr>
<tr>
<td>Product Development</td>
<td>500000</td>
</tr>
<tr>
<td>Marketing</td>
<td>500000</td>
</tr>
<tr>
<td>Services</td>
<td>100000</td>
</tr>
<tr>
<td>Support</td>
<td>100000</td>
</tr>
<tr>
<td>Maintenance</td>
<td>100000</td>
</tr>
<tr>
<td colspan="2">Total Budget = INR 1300000</td>
</tr>
</table>
</body>
</html>
表示結果
上記の例では、見出しセルに対して以下のようにcolspan属性を設定しています。
<th colspan="2">Expenses</th>
このように値が「2」に設定されているため、「Expenses」という見出しセルは2列分の幅にまたいで表示されます。同様に、最終行の合計金額のセルにもcolspan="2"を指定することで、1つのセルが表全体の幅を占めるようになっています。
colspan属性を使いこなすことで、複雑な構造のテーブルでも見出しやデータを整理して、読みやすいレイアウトを作成できます。なお、縦方向にセルを結合したい場合は、代わりにrowspan属性を使用します。
-
HTMLのlang属性とは？使い方と言語コードの指定方法を解説
HTMLのlang属性は、そのHTML要素の内容がどの言語で書かれているかを定義するための属性です。lang属性はグローバル属性に分類されるため、すべてのHTML要素に対して自由に指定することができます。検索エンジン最適化（SEO）やスクリーンリーダーによる音声読み上げの正確性向上にも役立つ重要な属性なので、適切な言語コードを設定しておきましょう。基本構文lang属性の基本的な記述方法は以下のとおりです。<タグ名 lang=言語コード></タグ名>「言語コード」の部分には、ISO 639-1で規定されている言語コードを指定します。代表的な例としては、日本語ならja、英語
-
HTMLのreversed属性とは？ol要素でリストを降順に表示する方法
HTMLのreversed属性は、<ol>（順序付きリスト）要素に指定することで、リスト項目の番号を降順（大きい数字から小さい数字へ）で表示させるためのブール型属性です。通常、順序付きリストは「1」から始まる昇順で番号が振られますが、reversed属性を追加するだけで、マークアップをほとんど変更せずに逆順のリストを簡単に作成できます。 構文 reversed属性の基本的な構文は以下のとおりです。 <ol reversed></ol> 値を指定する必要はなく、属性名だけを記述すれば有効になります。それでは、実際にreversed属性を使用した具体例を見てみま