HTML tableで表作成する方法【レイアウトの方法まで完全網羅】
HTMLで表を作りたいときに使うのは「tableタグ」です。
しかし、なかなか使いこなすことができない！という方もいらっしゃるのではないでしょうか？
「HTMLのtableタグを使いこなせるようになりたい！」
「tableタグで好きなデザインの表を作成したい！」
「HTMLのtableタグの+αの知識を身につけたい！」
と、感じている人もいるはずです。
今回は、
- html tableの基本コードの書き方
- html tableをhtmlのみでデザイン変更する方法
- html tableのデザイン例
- html tableの+αの知識
などについてご紹介します。
この記事を読んで、曖昧になりがちなHTMLのtableタグの使い方をマスターしましょう。
「HTMLのtableタグを使いこなして業務に活かしたい」という方は、ぜひ最後まで読み進めてくださいね。
エンジニアメンター
html tableは表を作るタグ
まずは、html tableの概要について理解しておきましょう。
tableタグ（table要素）を使えば、表（テーブル）を作成することができます。
Webページを閲覧していて、実際にこのような表をみたことがあるのではないでしょうか。
上記のような表は、基本的にtableタグを使って作られています。
さっそく、このtableタグの構造と、中に含まれる4つの要素について見ていきましょう。
表の構成要素4つ
tableタグを使って作られる表（テーブル）は、<table> <tr> <td> <th>の４つの要素で構成されています。
4つの要素の構造は次のとおりです。
さらに、それぞれの要素の意味は次になります。
・<tr>：table rowの略で、表に行を１行作ります。
・<th>：table headerの略で、表の見出しとなるセルを作ります。
・<td>：table dateの略で、表の中身となるセルを作ります。
html tableで表を作成するには、これらの要素が欠かせません。
名前が似ていて紛らわしいですが、１つ１つが何を表しているのかを覚えてしまえば簡単ですよ。
しっかり覚えておきましょう。
【HTML初心者入門】テーブルのセルを結合する方法を解説！
html tableタグの基本
次に、tableタグの基本を見ていきましょう。
| コンテンツカテゴリ | フローコンテンツ |
| 対応ブラウザ | Internet Explorer 2～ / Google Chrome 1～ / Safari 1～ / Firefox 1～ / Opera 6～ |
| タグの分類 | ブロックレベル要素 |
| 定義バージョン | Strict, Transitional, Frameset |
| 開始/終了タグの有無 | どちらも必須 |
これらは頭の片隅に置いておけばOKです。
では、基本のコードを見ていきましょう。
長いコードに関しては、縮小しているのでクリックして確認してみてください。
プログラミングスキルを身につけて、アプリケーションやWEBサービスを作りたい方へ！
【DMM WEBCAMP】は、独学では挫折率の高いプログラミング学習を徹底サポートします。
✔受講生の97%が未経験からのスタート！
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる！
✔基礎知識をゼロから丁寧に学習できるコースを用意！
＼あなたに合ったカリキュラムを紹介／
html tableの基本コードの書き方
さっそくhtml tableの基本的なコードの書き方を覚えていきましょう。
次のような表を作成する方法についてご説明します。
まず、対応しているHTMLとCSSのコードを確認したい方はこちらをご覧ください。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="1">
<caption>メニュー表</caption>
<thead>
<tr>
<th>メニュー</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr>
<td>オムライス</td>
<td>700円</td>
</tr>
<tr>
<td>ハンバーグ</td>
<td>900円</td>
</tr>
<tr>
<td>ナポリタン</td>
<td>600円</td>
</tr>
</tbody>
</table>
</body>
</html>table {
border-collapse: collapse;
}
table th, table td {
border: solid 1px black;
}最初にHTMLについて説明してから、CSSの解説をします。
まずはじめに、表にしたいと考えているところを<table></table>で囲みます。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>メニュー</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr>
<td>オムライス</td>
<td>700円</td>
</tr>
<tr>
<td>ハンバーグ</td>
<td>900円</td>
</tr>
<tr>
<td>ナポリタン</td>
<td>600円</td>
</tr>
</tbody>
</table>
</body>
</html>この時、tableタグの横にborderがありますが、これは枠線の太さを指定するものです。
これを書かなければ、下のように枠線のない表になってしまいます。
しかし、枠線に関する指定はHTMLで行うよりもCSSで行う方が最適なので、それについてはこの後説明していきたいと思います。
作りたいと思う行の数だけ、<tr></tr>を作ります。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>メニュー</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr>
<td>オムライス</td>
<td>700円</td>
</tr>
<tr>
<td>ハンバーグ</td>
<td>900円</td>
</tr>
<tr>
<td>ナポリタン</td>
<td>600円</td>
</tr>
</tbody>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>メニュー</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr>
<td>オムライス</td>
<td>700円</td>
</tr>
<tr>
<td>ハンバーグ</td>
<td>900円</td>
</tr>
<tr>
<td>ナポリタン</td>
<td>600円</td>
</tr>
</tbody>
</table>
</body>
</html>これが基本のコードになります。
ここまでで完成する表がこちらです。
しかし、最初にお見せした表と線が異なっています。
線のスタイルを調整するためのCSSの指定がこちらです。
table {
border-collapse: collapse;
}
table th, table td {
border: solid 1px black;
}thとtdに対して枠線の指定をすることで、１つ１つのセルに枠線をつけているイメージです。
この罫線のスタイルは以下のようにまとめて指定することができます。
今回の場合は、「solid→一本線、1px→太さが1px、black→黒い線」という指定です。
これだけだと隙間ができてしまうので、border-collapse: collapse;を使って指定をします。
これは、隣り合うセルの罫線を間を空けずに表示するものです。
このときに先ほど話したtableタグのborder属性は0に指定しておきます。
CSSで罫線に対して指定ができているため、HTML側で線について指定する必要がないためです。
最後に、表の概要を示すcaptionタグを追加します。
表の内容を表すタイトルなので、必要な場合はつけましょう。
<caption>メニュー表</caption>
こちらのコードは、必ずtableタグの直後に書きましょう。
ここまでコードを書くと、最初の表が完成します。
全体の流れを理解できればOKです。
次はデザインについて見ていきます。
html tableはCSSでデザインしよう
HTMLで作った表の見た目を変えていくためには、CSSを使います。
先ほど罫線を引いたときのようにCSSに書き加えることによって、装飾の変更が可能です。
HTMLと同じファイルにコードを書くことも可能ですが、別々のファイルに書く方法が一般的です。
HTMLと別のファイルに書いたCSSをHTMLに読み込むには、HTML内で下記のコードを指定する必要があります。
<link rel="stylesheet" href="名前.css">詳しく知りたい方はこちらの記事を読んでみてください。
HTMLファイルへのCSS読み込み方法を徹底解説【コピペで使える】
ここからは主にCSSを変えていくので、HTMLの知識と混ざらないように注意しましょう。
HTMLの知識とCSSの知識をしっかり区別して理解することが大切です。
CSSで行えるデザインの変更は、次になります。
それぞれのデザイン変更について詳しく見ていきましょう。
1.見出しを変える
・【見出し無しにする】<thead></thead>・<th>タグを抜く
見出しをなくしたいときは<thead></thead>タグと<th>タグを抜くだけで、見出しのない表にすることができます。
ただ情報を並べたいときは、<table><tbody><td><th>だけを使いましょう。
左のコードで色が付いている部分の<thead>を抜いて、<th></th>を<td></td>に変えます。
変更前のコード
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<thead>
<tr>
<th>メニュー</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr>
<td>オムライス</td>
<td>700円</td>
</tr>
<td>ハンバーグ</td>
<td>900円</td>
</tr>
<tr>
<td>ナポリタン</td>
<td>600円</td>
</tr>
</tbody>
</table>
</body>
</html>変更後のコード
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<tr>
<td>メニュー</td>
<td>値段</td>
</tr>
<tbody>
<tr>
<td>オムライス</td>
<td>700円</td>
</tr>
<td>ハンバーグ</td>
<td>900円</td>
</tr>
<tr>
<td>ナポリタン</td>
<td>600円</td>
</tr>
</tbody>
</table>
</body>
</html>そうすると下の画像のように、見出しをなくすことができます。
・【見出しを縦に並べる】<th><td>を１つの<tr>の中に
基本の通りコードを書くと、見出しは横に並んでいきます。
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>このように<tr>タグの中に見出しだけが並んでいたものを、
<tr>
<th>見出し</th>
<td>データ</td>
<td>データ</td>
</tr>このように＜tr>タグの中に横に並べたい見出しとデータを一緒に入れることによって、見出しを縦に並べることができます。
先程までのデータを書き換えたものがこちらです。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<tr>
<th>メニュー</th>
<td>オムライス</td>
<td>ハンバーグ</td>
<td>ナポリタン</td>
</tr>
<tr>
<th>値段</th>
<td>700円</td>
<td>900円</td>
<td>600円</td>
</tr>
</table>
</body>
</html>実際にこのように横並びの表にすることができました。
2.罫線を変える
罫線のスタイルはborder属性を使ってまとめて線の種類・太さ・色を指定することができます。
方法は先ほども触れた通り、次のとおりです。
線の種類・太さ・色の順番は、どのような順番になっても問題ありません。
罫線は先ほども出てきましたが、それぞれのセルの周りに引かれているイメージです。
そのため、tableタグに対して指定するのではなく、thタグ・tdタグに指定を行ってください。
table th, table td{
border:solid 1px black;
}ここでは border : 線の種類 太さ 色の順番で指定がされています。
よく使われる線の種類としては、solid（実線）・dotted（点線）・dashed（破線）・double（二重線）none（なし）があります。
用途に合わせて使い分けましょう。
3.表のデザインを変える
次は表のデザインを変える方法をご説明します。
・【背景の色を変える】background-color属性
表の背景色を変えたいときは、色を変えたい行や列に対してbackground-color属性で指定します。
table th, table td{
background-color: #174a5c;
}・【一行だけ背景の色を変える】bgcolor属性
表全体ではなく、一行だけ色を変えてみましょう。
この場合、cssではなくhtmlを使用します。
一行だけなので、色を変えたいtr要素に色を指定する形となります。
<tr bgcolor="#174a5c">
・【1つのセルだけ背景の色を変える】bgcolor属性
表の一部だけ目立たせたい場合は、一つのセルに色を付けます。
こちらでも、htmlを使用して色をつけましょう。
<th bgcolor="#174a5c"> <td bgcolor="#174a5c">
最初に説明した通り、表の見出しの場合はth要素に色をつけ、表の中身の場合はtd要素に色をつけます。
また、行に色をつけるときと同様、色をつけたい部分にだけbgcolor属性で色を指定します。
・【余白を調節する】padding属性
余白を調節したいときは、padding属性で指定していきます。
table th, table td{
padding : 20px 10px;
}paddingについて詳しく知りたい方は、この記事をご覧ください。
CSS【paddingとmarginの使い分け】余白の作り方を徹底解説！
・【幅を変える】width属性
幅を変える時は、width属性で指定していきます。
table {
width : 300px ;
}この時、いつもと同じように px と ％どちらで指定しても構いません。
ただし、スマホ対応のこと考えると％で指定する方が良いかもしれません。
・【高さを変える】height属性
高さを変える時は、height属性で指定していきます。
table{
height : 100px ;
}このときに使うことができるのはpxのみです。
・【結合させる（横）】colspan属性
横向きに結合させたい時は、colspan属性で指定していきます。
注意しなければならないポイントとして、結合させるときはcssではなく、htmlで指定しましょう。
わかりやすくするために、cssで文字を中央寄せにしておくといいですよ。
つなげたいセルのはじまりの<th>（または<td>）にcolspan = “つなげたい数”を書き足します。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<tr>
<th>メニュー</th>
<td>オムライス</td>
<td>ハンバーグ</td>
<td>ナポリタン</td>
</tr>
<tr>
<th>値段</th>
<td>700円</td>
<td colspan="2">900円</td>
</tr>
</table>
</body>
</html>・【結合させる（縦）】rowspan属性
縦向きに結合させたい時は、rowspan属性で指定します。
ここでも、CSSではなくHTMLで指定しましょう。
つなげたいセルの中で一番上にあるものの<th>（または<td>）にrowspan=”つなげたい数”を書き足します。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<tr>
<th>メニュー</th>
<th>値段</th>
</tr>
<tr>
<td>オムライス</td>
<td>700円</td>
</tr>
<td >ハンバーグ</td>
<td rowspan="2">900円</td>
</tr>
<tr>
<td>ナポリタン</td>
</tr>
</table>
</body>
</html>未経験からホームページやWEBアプリケーションが作れるようになりたい方へ！
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔︎未経験からでも実践的なスキルが身に付くカリキュラムを用意！
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能！
✔通学不要！スキマ時間でプログラミング学習ができる！
＼経済産業省認定の圧倒的カリキュラム／
html tableをHTMLのみでデザイン変更する場合
ここまでcssでのデザイン変更をお伝えしましたが、HTMLでもある程度の変更は可能です。
ここからは、「文字の位置を変更したい」「罫線のデザインを変える方法が分からない」といった悩みを抱えている方に、主なデザイン変更の方法をご紹介します。
文字のデザインを変えたいとき
セルの中における文字の位置を変更したい場合は、allign属性を使用します。
align属性で文字の右寄せ、左寄せ、中央への移動が可能です。
・【右に寄せる】align属性
セルの中の文字を右寄せにするときは、align属性にrightを指定します。
<tr align="right">
・【左に寄せる】align属性
セルの中の文字を左寄せにするときは、align属性にleftを指定します。
td要素は左寄せが初期値です。
<tr align="left">
・【中央に移動する】align属性
セルの中の文字を右寄せにするときは、align属性にcenterを指定します。
th要素は中央配置が初期値です。
<tr align="center">
それぞれのセルに指定したコードと、コードを反映した表は以下のとおりになっています。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<tr>
<th>メニュー</th>
<td>オムライス</td>
<td>ハンバーグ</td>
<td>ナポリタン</td>
</tr>
<tr>
<th>値段</th>
<td align="right">700円</td>
<td align="left">900円</td>
<td align="center">600円</td>
</tr>
</table>
</body>
</html>
表のデザインを変えたいとき
・【表を横に並べる】style属性
複数の表を横に並べたいときは、style属性にfloatを指定します。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0" style="float:left; margin-right:10px;">
<tr>
<th>メニュー</th>
<td>オムライス</td>
<td>ハンバーグ</td>
<td>ナポリタン</td>
</tr>
<tr>
<th>値段</th>
<td>700円</td>
<td>900円</td>
<td>600円</td>
</tr>
</table>
<table border="0">
<tr>
<th>ドリンク</th>
<td>お茶</td>
<td>コーヒー</td>
<td>ジュース</td>
</tr>
<tr>
<th>値段</th>
<td>150円</td>
<td>300円</td>
<td>200円</td>
</tr>
</table>
</body>
</html>
・【内罫線を表示しない】rules属性
セルを区切る線を表示させない場合は、rules属性にnoneを指定します。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0" rules="none">
<tr>
<th>メニュー</th>
<td>オムライス</td>
<td>ハンバーグ</td>
<td>ナポリタン</td>
</tr>
<tr>
<th>値段</th>
<td>700円</td>
<td>900円</td>
<td>600円</td>
</tr>
</table>
</body>
</html>
・【グループ間の罫線のみ表示する】rules属性
行のセル間の区切りを無くしたいときは、同じくrules属性を使用し、groupsを指定します。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0" rules="groups">
<tr>
<th>メニュー</th>
<td>オムライス</td>
<td>ハンバーグ</td>
<td>ナポリタン</td>
</tr>
<tr>
<th>値段</th>
<td>700円</td>
<td>900円</td>
<td>600円</td>
</tr>
</table>
</body>
</html>
コピペで使える！html tableのデザイン例
元となる表のHTMLのコードはこちらです。
このHTMLをベースに、CSSで装飾を足していきます。
<!DOCTYPE html>
<html>
<head>
<title>表の見本</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<thead>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
</body>
</html>シンプルな表
シンプルで使いやすい表のコードを紹介します。
table {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: left;
}
table th {
color: black;
padding: 10px;
border-bottom: 3px solid #174a5c;
}
table td {
padding: 10px;
color: gray;
border-bottom: 1px solid gray;
}この表では、表自体の罫線は引かずにborder-bottom属性でアンダーラインを引きました。
「border-bottom ：線の太さ 線の種類 線の色 」で指定可能です。
自分好みの色や太さに変更して使ってみてくださいね。
ビジネス向けの表
企業のHPで使えるような、少し堅めの表のコードをご紹介します。
table {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: center;
}
table th {
color: black;
background-color: lightgray;
padding: 10px;
}
table td {
color: black;
background-color: #F5F5F5;
padding: 10px;
border-bottom: 1px dotted lightgray;
}先ほど使ったborder-bottom属性をここでも使っています。
前述の通り線の種類はsolid（実線）・dotted（点線）・dashed（破線）・double（二重線）none（なし）などがあるので、使いたいものに合わせて使ってみましょう。
「CSS 色」などで検索すると豊富に見つかります。
覚える必要がないので便利です。
ポップな表
罫線を引かないことで、親しみやすい表に感じられます。
ここでは行ごとに色を変える方法をお伝えしましょう。
table {
text-align: center;
width: 100%;
}
table th, table td {
padding : 20px 10px;
}
table tr *:nth-child(1){
background:#cc0066;
}
table tr *:nth-child(2){
background:#ff3399;
}
table tr *:nth-child(3){
background:#ffcccc;
}table tr *:nth-child(）とすることによって（）の中にある数字の列について一気に指定することができます。
html tableの＋α知識
上記の知識以外に知っておくと便利な知識をご紹介します。
ここまで使いこなすことができるようになれば、htmlで表を作る際に困ることもほぼなくなるでしょう。
スマホの画面に対応させる
スマホに対応するやり方を解説します。
・横幅を100％にする
th・td共に横幅を100％に指定することによって、スマホの画面に収めていきます。
table {
border-collapse: collapse;
text-align: center;
}
table th, table td {
border: solid 1px black;
padding : 20px 10px;
width: 100%;
display: block;
}縦に並べることでスクロールで閲覧できるようになります。
データ部分だけスクロールできるようにする
設定するにはテーブルヘッダ要素とテーブルボディ要素を定義し、各列にclassを振り分けて幅を設定する必要があります。
テーブルヘッダをdisplayプロパティで固定し、テーブルボディは縦軸スクロールで高さを固定しましょう。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<thead class="table_head">
<tr>
<th>メニュー</th>
<th>値段</th>
</tr>
</thead>
<tbody class ="table_body">
<tr>
<td>オムライス</td>
<td>700円</td>
</tr>
<td>ハンバーグ</td>
<td>900円</td>
</tr>
<tr>
<td>ナポリタン</td>
<td>600円</td>
</tr>
</tbody>
</table>
</body>
</html>table {
border-collapse: collapse;
text-align: center;
}
table th, table td {
border: solid 1px black;
padding : 20px 10px;
text-align: left;
width: 120px;
}
thead.table_head,tbody.table_body{
display: block;
}
tbody.table_body {
overflow-y: scroll;
height: 150px;
}・overflow-y: scroll; がスクロールを可能にする属性です。
・height: 150px; の数字を変えると表のスクロール部分の高さを変更することができます。
画像などのタグを挿入する
画像を入れる場合など、セルの中にタグを挿入するときは、thもしくはtdの中にコードを書きます。
画像を入れる手順は基本と変わらず、コードは以下のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<tr>
<th>メニュー</th>
<td>オムライス</td>
<td>ハンバーグ</td>
<td>ナポリタン</td>
</tr>
<tr>
<th>値段</th>
<td>700円</td>
<td>900円</td>
<td>600円</td>
</tr>
<tr>
<th>画像</th>
<td><img src="omuretsu.jpg" alt="オムライス"></td>
<td><img src="hanba-gu.jpg" alt="ハンバーグ"></td>
<td><img src="naporitan.jpg" alt="ナポリタン"></td>
</tr>
</table>
</body>
</html>
列をグループ化する
1列目は青で背景を塗り、2列目以降は赤で背景を塗るといったような、セルをグループ化してデザインしたい場合はcolgroupタグを使用します。
colgroupは表の縦列をグループ化するタグで、spanで列の番号を指定します。
colgroupは、tableタグのすぐ下に書きましょう。
<!DOCTYPE html>
<html>
<head>
<title>メニューと値段</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<table border="0">
<colgroup span="1" style="background:#CED8F6;>
<colgroup span="2" style="background:#F6CED8;>
<tr>
<th>メニュー</th>
<td>オムライス</td>
<td>ハンバーグ</td>
<td>ナポリタン</td>
</tr>
<tr>
<th>値段</th>
<td>700円</td>
<td>900円</td>
<td>600円</td>
</tr>
</table>
</body>
</html>上記の例では、span=1で左から1列目、span=2で2列目以降を指定しています。また、style属性で背景色を指定し、グループ別でデザインを作成しています。
colgroupでは、適用できるデザインが限られています。適用可能なデザインは以下の通りです。
・backgroud（背景）
・width（横幅）
・border（線）
・visibility（表示・非表示）
他のCSSを指定する場合は、classを使用すると良いでしょう。
classについては、こちらの記事で紹介しています。
まとめ：html tableとCSSで好きな表を作ろう！
今回は、html tableの書き方やCSSによるデザイン変更の方法についてご紹介しました。
まず基本として、tableタグを構成する4つの要素を覚えることが大切です。
さらに、見た目を整えたいときはCSSでコードを書くことも忘れないようにしましょう。
これさえ分かっていれば、作りたい表のイメージに合わせてHTML/CSSを書くだけです。
たくさん調べて、何度も繰り返し書くことで実際に使えるスキルになります。
わからなくなったら、いつでもこの記事に戻ってきてくださいね。
「HTML/CSSを本格的に身につけたい」という方には、プログラミングスクールもおすすめです。
html tableによる表の作成方法をマスターして、業務に活かしましょう。
この他にもHTMLのタグをさらに知りたい方は、下記の記事を参考にしてください。
【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き
DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます！
外出自粛中でも、自宅にいながらオンライン学習でスキルを高めることができます。
キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか？
自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう！この機会を活用し、ぜひDMM WEBCAMPの無料カウンセリングをご利用ください。
無料カウンセリングに申込む
