tableについてまとめ - きままぶろぐ

こんにちは！

htmlでtableタグを使う場面が意外に多いのでわかりやすくまとめてみます！

基本的なタグ一覧

tableタグに関連する基本的なタグの一覧です！

<table>　tableを作りますよという宣言みたいな感じ
<tr>　行(横)の値のこと
<td>　表の中の値を入れる
<th>　見出し

図にすると

実際にコードで表現する

上の図をコードで書いてみようと思います！

index.htmlはこんな感じ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>テスト</title>
</head>
<body>
  <table>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
      <th>見出し3</th>
      <th>見出し4</th>
    </tr>
    <tr>
      <td>値1</td>
      <td>値2</td>
      <td>値3</td>
      <td>値4</td>
    </tr>
    <tr>
      <td>値1</td>
      <td>値2</td>
      <td>値3</td>
      <td>値4</td>
    </tr>
    <tr>
      <td>値1</td>
      <td>値2</td>
      <td>値3</td>
      <td>値4</td>
    </tr>
  </table>
</body>
</html>

style.cssはこんな感じ

table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  border: 1px solid red;
  text-align: center;
}
th{
  width:100px;
  color:skyblue;
}
td{
  color:orange;
}

これをブラウザで表示すると…

f:id:aki-momo:20201026125412p:plain — 図と同じですね！

trで囲ってから書くと考えるとわかりやすいです！

こんな感じで表をhtmlで書くことができます！

参考になりましたら幸いです！

ありがとうございました！