テーブルタグ~HTML~
テーブルタグ
① tableタグ
1つのテーブル全体をまとめるタグ
②trタグ
table rowの略です。テーブルの横の列を作ります。
③thタグ
見出しタグセルを作るタグを作るタグです。
④tdタグ
通常セルを作るタグです。
コード
index.html
<table>
<caption>登場人物</caption>
<tr>
<th class="col-1"> </th>
<th class="col-2">年齢</th>
<th class="col-3">性別</th>
<th class="col-4">性格</th>
</tr>
<tr>
<th>太郎</th>
<td>22</td>
<td>男</td>
<td>優しい</td>
</tr>
<tr>
<th>花子</th>
<td>18</td>
<td>女</td>
<td>お人好し</td>
</tr>
<tr>
<th>一郎</th>
<td>24</td>
<td>男</td>
<td>ロールキャベツ系男子</td>
</tr>
</table>
index.html
<table>
<caption>登場人物</caption>
<tr>
<th class="col-1"> </th>
<th class="col-2">年齢</th>
<th class="col-3">性別</th>
<th class="col-4">性格</th>
</tr>
<tr>
<th>太郎</th>
<td>22</td>
<td>男</td>
<td>優しい</td>
</tr>
<tr>
<th>花子</th>
<td>18</td>
<td>女</td>
<td>お人好し</td>
</tr>
<tr>
<th>一郎</th>
<td>24</td>
<td>男</td>
<td>ロールキャベツ系男子</td>
</tr>
</table>
①:nbsp
セルが空の場合に入れます。
trタグが横列になります。trタグに挟まれる形で、太郎君、22,男、優しいが1行になります。
HTMLでの実装は以上になりますが、このままでは表のようにボーダーが無いのでCSSで整えていきます。
CSS
style.css
table,th,td {
border: 3px solid gray;
border-spacing: 0;
border-collapse: collapse;
margin: auto;
}
.col-1,.col-2,.col-3 {
width: 20%;
}
th{
background-color: pink;
}
style.css
table,th,td {
border: 3px solid gray;
border-spacing: 0;
border-collapse: collapse;
margin: auto;
}
.col-1,.col-2,.col-3 {
width: 20%;
}
th{
background-color: pink;
}
デフォルトでは、ボーダーがつかないためcssで指定します。
①border-spacingでは、ボーダー同士の隙間をなくします。
②border-collapaseでは、ボーダー同士を重ねます。
③セル同士の幅設定
それぞれのthタグに幅を設定することでより見やすくなります。
完成
Author And Source
この問題について(テーブルタグ~HTML~), 我々は、より多くの情報をここで見つけました https://qiita.com/akari_0618/items/ad02d52b60a6491f58ea著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .