8月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
7月受入枠は満員となっております。8月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい

上記にあてはまる方は、ぜひご検討ください!

みなさんはHTMLの学習をしていませんか?

今回の記事では<colspan>属性の使い方や注意点について紹介していきます!

連結するセルの水平方向の数を指定する

<th>タグ、<td>タグにcolspan属性を記述すると、セルを横方向に連結する(セルがまたがる列数)ことができます。

・学習におすすめの本を探している方は、「【初心者向け】htmlの学習におすすめの本12選!」の記事を参考にしてください。

書き方

colspan属性の値には、「連結するセルの数」を数字で指定します。指定しない場合の初期値は 1 になります。(連結なし)

<td colspan= "2">~</td>

注意点

以下のようなtable要素での指定があった場合、1行目の列数は「5列」ではなく「4列」になります。1行目はA,B,C,Dの4つの列しかありませんので、Bでcolspanを2に指定しても、あくまでテーブルの列の数は1行目の列の数できまりますので、無視されます。

<table border=1 width=50%>

<tr>

<td>A</td>


<td colspan=2>B</td>


<td>C</td>


<td>D</td>

</tr>

</table>

以下のように先頭が「5列」で明確なら、先ほどのcolspan指定は有効になります。

<table border=1 width=50%>

<tr>

<td>1</td>


<td>2</td>


<td>3</td>


<td>4</td>


<td>5</td>

</tr>


<tr>

<td>A</td>


<td colspan=2>B</td>


<td>C</td>


<td>D</td>

</tr>

</table>

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>[TEST]colspan属性</title>
</head>
<body>

<table border="1">

<tr>

<td colspan="2">結合セル</td>


<td>セル</td>


<td>セル</td>


<td>セル</td>

</tr>


<tr>

<td>セル</td>


<td colspan="3">結合セル</td>


<td>セル</td>

</tr>


<tr>

<td>セル</td>


<td>セル</td>


<td>セル</td>


<td colspan="2">結合セル</td>

</tr>

</table>

</body>
</html>
</body>
</html>

まとめ

初心者の方向けにcolspan属性を紹介していきましたが、いかがでしたか?

headタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

8月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
7月受入枠は満員となっております。8月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!

おすすめの記事