テーブルに関する要素コミュ

ニコニコ大百科:HTMLタグ一覧 HTMLタグの一覧 テーブルに関する要素

テーブルに関する要素一覧

テーブルを作成する

↑

---

<table> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> </tr> <tr> <td>F</td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> </tr> <tr> <td>K</td> <td>L</td> <td>M</td> <td>N</td> <td>O</td> </tr> <tr> <td>P</td> <td>Q</td> <td>R</td> <td>S</td> <td>T</td> </tr> <tr> <td>U</td> <td>V</td> <td>W</td> <td>X</td> <td>Y</td> </tr> </tbody> </table>

1列目 2列目 3列目 4列目 5列目 1行目 A B C D E 2行目 F G H I J 3行目 K L M N O ・・・ 4行目 P Q R S T 5行目 U V W X Y ・ ・ ・

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<td>国名</td> 　　<td>地域</td> 　　<td>通貨</td> 　　<td>公用語</td> 　</tr> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　　<td>英語</td> 　</tr> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　　<td>日本語</td> 　</tr> </tbody> </table>	国名 地域 通貨 公用語 アメリカ 北アメリカ USドル 英語 日本 アジア 円 日本語

見出しセルとデータセルを作成する

↑

---

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	国名 地域 通貨 アメリカ 北アメリカ USドル 日本 アジア 円

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>アメリカ</th> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	国名 地域 通貨 アメリカ 北アメリカ USドル 日本 アジア 円

表にタイトルを付ける

↑

---

ソースコード	表示結果
<table> <caption>各国通貨の一覧</caption> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>アメリカ</th> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 アメリカ 北アメリカ USドル 日本 アジア 円

セルを結合する

↑

---

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<th colspan="3">各国通貨の一覧</th> 　</tr> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>アメリカ</th> 　　<td rowspan="2">北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<th>カナダ</th> 　　<td>カナダドル</td> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 アメリカ 北アメリカ USドル カナダ カナダドル 日本 アジア 円

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>フランス</th> 　　<td rowspan="3" colspan="2">ヨーロッパ・ユーロ</td> 　</tr> 　<tr> 　　<th>ドイツ</th> 　</tr> 　<tr> 　　<th>イタリア</th> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	国名 地域 通貨 フランス ヨーロッパ・ユーロ ドイツ イタリア 日本 アジア 円

表の幅を指定する

↑

---

ソースコード	表示結果
<table style="width:300px;"> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>アメリカ</th> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	国名 地域 通貨 アメリカ 北アメリカ USドル 日本 アジア 円

表の行をグループ化する

↑

---

※style="background-color:red;"は背景色を赤色に、limeは緑色に、blueは青色にします。詳細はCSSのbackground-colorプロパティの項をご覧ください。
ソースコード	表示結果
<table> <caption>各国通貨の一覧</caption> <thead style="background-color:red;"> 　<tr> 　　<td>国名</td> 　　<td>地域</td> 　　<td>通貨</td> 　</tr> </thead> <tfoot style="background-color:blue;"> 　<tr> 　　<td colspan="3">米・加・日比較</td> 　</tr> </tfoot> <tbody style="background-color:lime;"> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<td>カナダ</td> 　　<td>北アメリカ</td> 　　<td>カナダドル</td> 　</tr> </tbody> <tbody> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 米・加・日比較 アメリカ 北アメリカ USドル カナダ 北アメリカ カナダドル 日本 アジア 円

表の列をグループ化する

↑

---

※style="background-color:lime;"は背景色を緑色に、blueは青色にします。詳細はCSSのbackground-colorプロパティの項をご覧ください。
ソースコード	表示結果
<table> <caption>各国通貨の一覧</caption> <colgroup style="background-color:lime;" span="1"></colgroup> <colgroup style="background-color:blue;" span="2"></colgroup> <thead> 　<tr> 　　<td>国名</td> 　　<td>地域</td> 　　<td>通貨</td> 　</tr> </thead> <tbody> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<td>カナダ</td> 　　<td>北アメリカ</td> 　　<td>カナダドル</td> 　</tr> </tbody> <tbody> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 アメリカ 北アメリカ USドル カナダ 北アメリカ カナダドル 日本 アジア 円

表の列の属性をまとめて指定する

↑

---

※style="background-color:red;"は背景色を赤色にします。詳細はCSSのbackground-colorプロパティの項をご覧ください。
ソースコード	表示結果
<table> <caption>各国通貨の一覧</caption> <colgroup><col style="background-color:red;" span="2" /></colgroup> <thead> 　<tr> 　　<td>国名</td> 　　<td>地域</td> 　　<td>通貨</td> 　</tr> </thead> <tbody> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<td>カナダ</td> 　　<td>北アメリカ</td> 　　<td>カナダドル</td> 　</tr> </tbody> <tbody> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 アメリカ 北アメリカ USドル カナダ 北アメリカ カナダドル 日本 アジア 円

ニコニコ大百科:HTMLタグ一覧

この記事に関するご意見・ご要望は元記事にお願い致します。