サンプル有り！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で好きなように指定できるので、いろんな書き方を覚えておきましょう。

 

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

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

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

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