サンプル有り！CSSで書くテーブル（table）の作り方【初心者向け】

CSSでテーブルを様々なカスタマイズができます。今回はその一例を紹介します。

実際によくサイトで見るようなテーブルを作りながら書き方を解説しています。自身でも書いてみて覚えていきましょう。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

偶数行だけをグレーにする

エクセルなどでも偶数行だけ色を変えることがありますが、テーブルでもCSSのtr:nth-childというセレクタを使うことで、同様のことができます。

css部分
----------------------------
table, th, td {
  border-collapse: collapse;
  border: 1px solid #ccc;
  line-height: 1.5;
}

table.type06 th {
  width: 150px;
  padding: 10px;
  font-weight: bold;
  vertical-align: top;
}
table.type06 td {
  width: 350px;
  padding: 10px;
  vertical-align: top;
 }

tr:nth-child(even) {
  background: #d9d9d9;
 }
----------------------------

html部分
----------------------------
<table class="type06">
  <tbody>
    <tr>
      <td>太郎</td>
      <td>きびだんご</td>
    </tr>
    <tr>
      <td>二郎</td>
      <td>ラーメン</td>
    </tr>
    <tr>
      <td>ジョン</td>
      <td>ドーナツ</td>
    </tr>
    <tr>
      <td>ニキータ</td>
      <td>ビフストロガノフ</td>
    </tr>
    <tr>
      <td>三郎</td>
      <td>ちくわ</td>
    </tr>
  </tbody>
</table>
----------------------------

 

テーブルヘッダーを入れて色を変える

ヘッダーの色を変えることでより見やすくなります。実際にヘッダーの色を変えてみます。

css部分
----------------------------------
table, th, td {
  border-collapse: collapse;
  border: 1px solid #ccc;
  line-height: 1.5;
}

table.type06 th {
  width: 150px;
  padding: 10px;
  font-weight: bold;
  vertical-align: top;
  background: #3f3f3f;
  color: #ffffff;
}
table.type06 td {
  width: 350px;
  padding: 10px;
  vertical-align: top;
}
----------------------------------

html部分
----------------------------------
<table class="type06">
  <thead>
    <tr>
      <th>名前</th>
      <th>好きな食べ物</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>太郎</td>
      <td>きびだんご</td>
    </tr>
    <tr>
      <td>二郎</td>
      <td>ラーメン</td>
    </tr>
    <tr>
      <td>ジョン</td>
      <td>ドーナツ</td>
    </tr>
    <tr>
      <td>ニキータ</td>
      <td>ビフストロガノフ</td>
    </tr>
    <tr>
      <td>三郎</td>
      <td>ちくわ</td>
    </tr>
  </tbody>
</table>
----------------------------------

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

上の例2つを組み合わせてみる

「偶数行をグレーにする」と「テーブルヘッダーを入れて色を変える」を組み合わせてみます。すると、とても見やすいテーブルができます。

css部分
-----------------------------
table, th, td {
  border-collapse: collapse;
  border: 1px solid #ccc;
  line-height: 1.5;
}

table.type06 th {
  width: 150px;
  padding: 10px;
  font-weight: bold;
  vertical-align: top;
  background: #3f3f3f;
  color: #ffffff;
}
table.type06 td {
  width: 350px;
  padding: 10px;
  vertical-align: top;
}

tr:nth-child(even) {
  background: #d9d9d9;
}
-----------------------------

html部分
-----------------------------
<table class="type06">
  <thead>
    <tr>
      <th>名前</th>
      <th>好きな食べ物</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>太郎</td>
      <td>きびだんご</td>
    </tr>
    <tr>
      <td>二郎</td>
      <td>ラーメン</td>
    </tr>
    <tr>
      <td>ジョン</td>
      <td>ドーナツ</td>
    </tr>
    <tr>
      <td>ニキータ</td>
      <td>ビフストロガノフ</td>
    </tr>
    <tr>
      <td>三郎</td>
      <td>ちくわ</td>
    </tr>
  </tbody>
</table>
-----------------------------

 

以上、テーブル（table）の作り方を解説しました。

テーブルのレイアウトもCSSで好きなように指定できるので、いろんな書き方を覚えておきましょう。

 

この記事を監修してくれた方

中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。   小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

 

現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。

独学に限界を感じている場合はご検討ください。