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

  • 8
  • 0pt
掲示板へ


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

テーブルを作成する


                                                                                                                
1列目 2列目 3列目 4列目 5列目
1行目
2行目
3行目 ・・・
4行目
5行目


HTMLExcelのような表を作ることが出来ます。作り方は以下の通りです。

この時、各行の中の列数、すなわち各tr要素の中のtd要素の数は同じでなければいけません。セルを結合させたい場合はセルを結合するの項を参照)

tbody要素の詳しい説明は行をグループ化するの項を参照

                                                                                                                
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ドル
日本 アジア

表の行をグループ化する


thead要素(<thead>~</thead>)、tbody要素(<tbody>~</tbody>)、tfoot要素(<tfoot>~</tfoot>)を用いて表の行をそれぞれヘッダ、ボディ、フッタにグループ分けすることが出来ます。

thead要素、tfoot要素は1つの表に1つずつまでしか記述できません。tbody要素はいくつでも記述できます。

これらの要素だけでは意味を持ちませんが、スタイルシートなどの属性を各要素毎に指定できるようになります。

なお正規の記述順は上からthead要素、tfoot要素、tbody要素です。caption要素はthead要素の内容の上に来ます。thead、tfoot要素は省略する事が出来ますが、tbody要素だけはどんなテーブルにも最低1つは記述しなければいけません。

※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タグ一覧

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

【スポンサーリンク】

  • 8
  • 0pt
スマホ版URL:
https://dic.nicovideo.jp/t/c/co398059

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません
コミュニティ記事には、掲示板は存在しません。ニコニコミュニティ掲示板をご利用ください。

急上昇ワード改

2021/07/26(月)04時00分 現在

過去のオススメ記事