HTML Introduction | Basic HTML Elements | HTML Tables

Tags:

A table is a structure that organizes and displays several types of data in an easy-to-read form. In HTML, you can create these tables with the <table> tag.

The <table> tag consists of the following tags.

  1. The <tr> tag separates rows in a table.
  2. The <th> tag represents the title of each column, and all content is automatically bold and centered.
  3. The <td> tag divides table rows into individual cells.
<table>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

Run code

Table style

You can use the CSS border property to display borders on a table. If you do not explicitly specify a border property value, that table always displays an empty border.

<style>
    table, th, td { border: 1px solid black }
</style>

Run code

In the example above, the table border appears as double lines because the <table>, <th>, and <td> tags each have their own border.

To make a border displayed as two lines appear as a single line, use the border-collapse property. If you set the border-collapse property value to collapse, you can display the table border as one line.

<style>
    table, th, td { border: 1px solid black; border-collapse: collapse }
</style>

Run code

Merging table columns

You can merge table columns by using the colspan attribute.

<table>
  <tr>
    <th>분류</th>
    <th colspan="2">항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
    <td>배</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
    <td>감자</td>
  </tr>
</table>

Run code

Merging table rows

You can merge table rows by using the rowspan attribute.

<table>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td rowspan="2">과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>배</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>감자</td>
  </tr>
</table>

Run code

Merging table columns and rows

By using the colspan and rowspan attributes together, you can express more complex tables.

<table>
  <tr>
    <th>분류</th>
    <th colspan="2">항목</th>
  </tr>
  <tr>
    <td rowspan="2">과일</td>
    <td>사과</td>
    <td>배</td>
  </tr>
  <tr>
    <td>포도</td>
    <td rowspan="2">토마토 감자</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

Run code

Setting a table caption

You can use the <caption> tag to attach a title or short description to the top of a table.

<table style="width:100%">
  <caption>장바구니</caption>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

Run code