HTML・CSS Writing 2022

Master how to create a table

To create a table table tag, tr tag, td tag.

1 row 1 column	1 row 2 columns	1 row 3 columns
2 rows and 1 column	2 rows and 2 columns	2 rows and 3 columns

<table>
  <tr>
    <td> 1 row 1 column </td> 1 row 2 columns <td> <td> 1 row 3 columns </td>
  </tr>
  <tr>
    <td> 2 rows 1 column </td> 2 rows 2 columns <td> <td> 2 rows 3 columns </td>
  </tr>
</table>

Place the tr tag that represents the column under the table tag. Place the td tag that represents the line under the tr tag.

Add a frame to table items

Let's add a frame to the items in the table. To add a border to a table item, specify border in the stylesheet (CSS) of the td tag.

<style>
  .waku td {
    border: 1px solid #ddd;
  }
</style>

<div class = "waku">
  <table>
    <tr>
      <td> 1 row 1 column </td> <td> 1 row 2 columns </td> <td> 1 row 3 columns </td>
    </tr>
    <tr>
      <td> 2 rows and 1 column </td> <td> 2 rows and 2 columns </td> <td> 2 rows and 3 columns </td>
    </tr>
  </table>
</div>

Well, the borders are far apart. It's not like a table.

Join the separated table borders

Let's join the table borders apart. Specify "border-collapse: collapse;" in the style sheet (CSS) of the table tag.

<style>
  .waku_collapse table {
    border-collapse: collapse;
  }
  .waku_collapse td {
    border: 1px solid #ddd;
  }
</style>

<div class = "waku_collapse">
  <table>
    <tr>
      <td> 1 row 1 column </td> <td> 1 row 2 columns </td> <td> 1 row 3 columns </td>
    </tr>
    <tr>
      <td> 2 rows and 1 column </td> <td> 2 rows and 2 columns </td> <td> 2 rows and 3 columns </td>
    </tr>
  </table>
</div>

The frame of the table that you often see is completed.

Set appropriate padding for table items

Let's set the appropriate padding for the items in the table. It's a little cramped.

<style>
  .waku_collapse_padding table {
    border-collapse: collapse;
  }
  .waku_collapse_padding td {
    border: 1px solid #ddd;
    padding: 12px 20px 10px 20px;
  }
</style>

<div class = "waku_collapse_padding">
  <table>
    <tr>
      <td> 1 row 1 column </td> <td> 1 row 2 columns </td> <td> 1 row 3 columns </td>
    </tr>
    <tr>
      <td> 2 rows and 1 column </td> <td> 2 rows and 2 columns </td> <td> 2 rows and 3 columns </td>
    </tr>
  </table>
</div>

Make the table width 100%

Let's make the table width 100%. I think a table is a block element, but it is not a block element, but a special element called a table element. The default width is automatically adjusted to fit the item exactly.

To make the table width 100%, specify "width: 100%;" in the style sheet (CSS) of the table tag.

<style>
  .waku_collapse_padding_100 table {
    border-collapse: collapse;
    width: 100%;
  }
  .waku_collapse_padding_100 td {
    border: 1px solid #ddd;
    padding: 12px 20px 10px 20px;
  }
</style>

<div class = "waku_collapse_padding_100">
  <table>
    <tr>
      <td> 1 row 1 column </td> <td> 1 row 2 columns </td> <td> 1 row 3 columns </td>
    </tr>
    <tr>
      <td> 2 rows and 1 column </td> <td> 2 rows and 2 columns </td> <td> 2 rows and 3 columns </td>
    </tr>
  </table>
</div>

Add a headline

Let's add a heading to the table. There is a th tag for the headline, so it's a good idea to use it.

When using the first line as a heading

Let's make the first line the heading. The heading line is bold with a different background color. By default, the th tag has the text centered.

<style>
  .waku_collapse_padding_100_head_1row table {
    border-collapse: collapse;
    width: 100%;
  }
  .waku_collapse_padding_100_head_1row td, .waku_collapse_padding_100_head_1row th {
    border: 1px solid #ddd;
    padding: 12px 20px 10px 20px;
  }
  .waku_collapse_padding_100_head_1row th {
    font-weight: bold;
    background: #eee;
  }
</style>

<div class = "waku_collapse_padding_100_head_1row">
  <table>
    <tr>
      <th> 1 row 1 column </th> <th> 1 row 2 columns </th> <th> 1 row 3 columns </th>
    </tr>
    <tr>
      <td> 2 rows and 1 column </td> <td> 2 rows and 2 columns </td> <td> 2 rows and 3 columns </td>
    </tr>
  </table>
</div>

When using the first column as a heading

Let's make the first column the heading. The heading line is bold with a different background color. By default, the th tag has the text centered.

<style>
  .waku_collapse_padding_100_head_1col table {
    border-collapse: collapse;
    width: 100%;
  }
  .waku_collapse_padding_100_head_1col td, .waku_collapse_padding_100_head_1col th {
    border: 1px solid #ddd;
    padding: 12px 20px 10px 20px;
  }
  .waku_collapse_padding_100_head_1col th {
    font-weight: bold;
    background: #eee;
  }
</style>

<div class = "waku_collapse_padding_100_head_1col">
  <table>
    <tr>
      <th> 1 row 1 column </th> <td> 1 row 2 columns </td> <td> 1 row 3 columns </td>
    </tr>
    <tr>
      <th> 2 rows and 1 column </th> <td> 2 rows and 2 columns </td> <td> 2 rows and 3 columns </td>
    </tr>
  </table>
</div>

Specify the width of the item

You may want to use the small width for heading items and the remaining width for others.

For example, consider displaying company information.

Precautions when using tables on smartphone sites

Be careful when using tables on smartphone sites. Current websites are assumed to be accessed from smartphones.

The width of smartphones is very small. When the table is displayed on the smartphone, it is necessary to think about where to move the item and how to set the width of the item.

We need to think individually about the interface that is easy for users to use, so we will discuss it in detail in another article.