tableタグの使い方
table
タグはtr
、tr
、td
のタグを使用します。
実際にコードに表すとこうなります。
<!DOCTYPE html>
<html>
<head>
<title>【HTML】tableタグを簡単に作成する方法 </title>
</head>
<body>
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>鈴木</td>
<td>20歳</td>
</tr>
<tr>
<td>佐藤</td>
<td>24歳</td>
</tr>
<tr>
<td>田中</td>
<td>26歳</td>
</tr>
</table>
</body>
</html>
tableタグの説明
- tableタグの説明
- table: 表全体を囲むときに使用します。
- tr: 「Table Row(行)」の略。
表を囲むときに使用します。 - th: 「Table Header(見出し)の略。
表の見出しとして使用します。 - td: 「Table Data(データ)」の略。
表のデータとして使用します。
幅のサイズを変更する
今回はブラウザサイズを640pxとして進めていきます。
- 幅のサイズ指定
- 1 htmlにサイズ指定をする。
- 2 cssにサイズ指定をする。
幅のサイズをhtmlで指定をする方法
htmlにwidth指定はせずに、CSSで設定するようにしましょう。
理由:スマートフォンで見た際に画面からはみ出る可能性があります。
<table width="540" border="1">
</table>
必ずCSSでwidth指定をおこないましょう。
今回は例としてあげています。
幅のサイズをcssで指定をする方法
必ず幅(width)はcssで設定するようにしましょう。
1 table {
width: 540px;
margin: 0 auto;
}
2 - CSS指定
- パターン1:
width=”540px”に指定し、margin: 0 atuo;を指定することで中心にtableタグがくるように設置しています。 - パターン2:
width=”100%”に指定することでブラウザいっぱいに広がります。
width=”100%” = 640pxになります。
今回は2番を使用して次に進めます。
レスポンシブにする際には必ず100%指定ににましょう。
tableタグ、枠線に色をつけるbordercolor指定
上記の画像は「border=”1″」が指定しています。
枠線の太さを指定する方法
htmlに「border=”1″」を指定すると後から変更する際に大変面倒です。
線(border)の設定は全てCSSでするのが良いでしょう。
CSSで指定する方法を紹介します。
1 table {
width: 540px;
margin: 0 auto;
}
table th,
table td {
border: 3px solid #000000;
}
th
とtd
に
border: 3px solid #000000
を指定しています。
tableタグにborder属性は指定しないようにしましょう。
枠線の色を指定する方法
2 table {
width: 540px;
margin: 0 auto;
}
table th,
table td {
border: 3px solid #c00c00;
}
th
とtd
に
border: 3px solid #c00c00
を指定しています。
枠線の隙間を無くす方法
3 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
}
table th,
table td {
border: 1px solid #000000;
}
table
に
border-collapse: collapse
を指定することで一重線になります。
※collapse
とは隣接するボーダーラインを重ねあわせて表示させる指定になります。
少しずつ、いい感じになってきてる! あともう一息かな?
行や列の背景の色、文字の色を変更する指定
行や列の背景の色を変更する指定
1 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
background-color: #cf563a;
}
table th,
table td {
border: 1px solid #000000;
}
全体に指定する際にはtable
に
background-color: #cf563a
を指定します。
th
、td
の表の背景の色も変わります。
2 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
}
table th,
table td {
border: 1px solid #000000;
}
table th {
background-color: #cf563a;
}
table td {
background-color: #6fb067;
}
th
には
tbackground-color: #cf563a
を指定しています。
td
には
tbackground-color: #6fb067
を指定しています。
クラス名を付け行や列の背景の色を変更する指定
3 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
}
table th,
table td {
border: 1px solid #000000;
}
table th {
background-color: #cf563a;
}
table td {
background-color: #6fb067;
}
table td.bg_color01 {
background-color: #38a2c6;
}
今回は年齢の表にクラス名を付けています。
td.bg_color01
には
background-color: #38a2c6
を指定しています。
行や列の文字の色を変更する指定
1 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
color: #ffffff;
}
table th,
table td {
border: 1px solid #000000;
}
table th {
background-color: #cf563a;
}
table td {
background-color: #6fb067;
}
全体に指定する際にはtable
に
color: #ffffff
を指定します。
2 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
}
table th,
table td {
border: 1px solid #000000;
}
table th {
background-color: #cf563a;
color: #ffffff;
}
table td {
background-color: #6fb067;
color: #fff200;
}
th
には
color: #ffffff
を指定しています。
td
には
color: #fff200
を指定しています。
3 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
}
table th,
table td {
border: 1px solid #000000;
}
table th {
background-color: #cf563a;
color: #ffffff;
}
table td {
background-color: #6fb067;
color: #fff200;
}
table td.font_color01 {
color: #3a3706;
}
今回は年齢の表にクラス名を付けています。
td.font_color01
には
color: #3a3706
を指定しています。
文字を中央寄せする指定
文字を中央寄せする指定
1 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
color: #ffffff;
text-align: center;
}
table th,
table td {
border: 1px solid #000000;
}
table th {
background-color: #cf563a;
}
table td {
background-color: #6fb067;
}
全体に指定する際にはtable
に
text-align: center
を指定します。
文字を左右に配置する指定
2 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
color: #ffffff;
}
table th,
table td {
border: 1px solid #000000;
}
table th {
background-color: #cf563a;
text-align: left;
}
table td {
background-color: #6fb067;
text-align: right;
}
th
には
text-align: left
を指定しています。
td
には
text-align: right
を指定しています。
表の余白を変える指定
表の余白を変える指定
1 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
color: #ffffff;
text-align: center;
}
table th,
table td {
border: 1px solid #000000;
padding: 10px;
}
table th {
background-color: #cf563a;
}
table td {
background-color: #6fb067;
}
今回は、th
、td
に
padding: 10px
を指定しています。
2 table {
width: 540px;
margin: 0 auto;
border-collapse: collapse;
color: #ffffff;
text-align: center;
}
table th,
table td {
border: 1px solid #000000;
}
table th {
background-color: #cf563a;
padding: 10px;
}
table td {
background-color: #6fb067;
padding: 5px 10px;
}
th
には
padding: 10px
を指定しています。
td
には
padding: 5px 10px
を指定しています。
このようにth、tdと個別に設定ができます。
最初のデザインと同じになったね!! これで終わりかな?
あともう少し。ここからは、少し難しいセルを結合について解説するよ
セルを結合する指定
セルを縦方向に結合するrowspan属性
1 <table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>鈴木</td>
<td rowspan="2">① 20歳 ①と②を結合しております。</td>
</tr>
<tr>
<td>佐藤</td>
<!--<td>②</td>-->
</tr>
<tr>
<td>田中</td>
<td>26歳</td>
</tr>
</table>
※rowspan属性
はセルを縦方向に結合する際に使用します。
セルが縦につながりました。このときCSSの指定はとくに変える必要はありません。
セルを横方向に結合するcolspan属性
2 <table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>鈴木</td>
<td>20歳</td>
</tr>
<tr>
<td>佐藤</td>
<td>24歳</td>
</tr>
<tr>
<td colspan="2">① 田中は欠席です ①と②を結合しております。</td>
<!--<td>②</td>-->
</tr>
</table>
※colspan属性
はセルを横方向に結合する際に使用します。
セルが横につながりました。このときCSSの指定はとくに変える必要はありません。
関連記事
今回は、【Table Tag Generator】についてのご説明です。HTMLの表を簡単に作成についてご説明しております。複雑な表の結合も文字の入力も簡単に出来ます。最後にHTMLコードが反映させるのでコピペで簡単作成。
まとめ
今回はこれで以上です。
HTMLのtableタグについて説明いたしました。
今後はtableタグに関するレスポンシブ、ジェネレーターについても記事にしていきます!
最後まで読んでいただきありがとうございました。
表を作成からレイアウトの変更まで1度お試しください。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事