Table tag, block element and inline element
Tags: html, table, blockelements, inlineelements
Published: 2021-11-03 20:05:58

# tr, th, td
<code>&lt;tr&gt;</code>: a row of cells in a table.
<code>&lt;th&gt;</code>: a cell as header of a group of table cells
<code>&lt;td&gt;</code>: a cell of a table that contains data

<table>
    <tr>
        <th>Book</th>
        <th>Name</th>
        <th>Total</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Harry Potter</td>
        <td>100</td>
    </tr>
</table>

```html
<table>
    <tr>
        <th>Book</th>
        <th>Name</th>
        <th>Total</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Harry Potter</td>
        <td>100</td>
    </tr>
</table>
```

#colspan, rowspan
* colspan: This attribute contains a non-negative integer value that indicates for how many columns the cell extends. col들을 통합 // colspan="3" 3개의 col을 옆으로 3개 합침)
* rowspan: This attribute contains a non-negative integer value that indicates for how many rows the cell extends. row들을 통합 // rowspan="3" 3개의 row을 아래로 3개 합침
```html
<tr>
    <td colspan="2">Total Sales</td>
    <td>600</td>
</tr>
```

#thead, tbody, tfoot
<code>&lt;thead&gt;</code>: Table Head Element <code>&lt;thead&gt;</code> defines a set of rows defining the head of the columns of the table.
<code>&lt;tbody&gt;</code>: a set of table rows <code>&lt;tr&gt;</code> elements, indicating that they comprise the body of the <code>&lt;table&gt;</code>.
<code>&lt;tfoot&gt;</code>: element defines a set of rows summarizing the columns of the table.


<table>
      <thead>
        <tr>
          <th>Book</th>
          <th>Name</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Harry Potter</td>
          <td>100</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Hunger Game</td>
          <td>200</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Lord of the rings</td>
          <td>300</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Total</td>
          <td>600</td>
        </tr>
      </tfoot>
</table>



```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <style>
      table,
      tr,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Book</th>
          <th>Name</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Harry Potter</td>
          <td>100</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Hunger Game</td>
          <td>200</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Lord of the rings</td>
          <td>300</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Total</td>
          <td>600</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
```



#caption, colgroup
<code>&lt;caption&gt;</code>: specifies the caption (or title) of a table.
<code>&lt;colgroup&gt;</code>: defines a group of columns within a table. <code>&lt;colgroup&gt;</code> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

#Table tag
```html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블 태그</title>
    <style>
        table,
        tr,
        th,
        td {
            border: solid 1px black;
            /* 충돌 되는 중복 border 제거 */
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <!-- table>(tr>th*3)+(tr>td*3)*3 -->
    <table>
        <caption>
            이 table은 영국에서 최초로 시작되어 일년에 한바퀴 돌면서...
        </caption>
        <colgroup>
            <col class="구분" />
            <col class="이름" />
            <col class="판매량" />
        </colgroup>
        <thead>
            <tr>
                <th>구분</th>
                <th>책 이름</th>
                <th>책 가격</th>
                <th>판매량</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>hello</td>
                <td>10000</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>hello2</td>
                <td>2000</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>hello3</td>
                <td>3000000000000000000</td>
                <td>3</td>
                <!-- <td rowspan="2">3</td> -->
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">총판매량</td>
            </tr>
        </tfoot>
        <!-- colspan : 
             This attribute contains a non-negative integer value that indicates for how many columns the cell extends. 
             (col들을 통합 // colspan="3" 3개의 col을 옆으로 3개 합침)
             rowspan:
             This attribute contains a non-negative integer value that indicates for how many rows the cell extends. 
             row들을 통합 // rowspan="3" 3개의 row을 아래로 3개 합침 -->
        <!-- <tr>
            <td colspan="3">총 판매량</td>
            <td>6</td>
        </tr> -->
    </table>
    </table>
</body>

</html>
```

# Scope
Scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.
The scope attribute has no visual effect in ordinary web browsers, but <strong>can be used by screen readers</strong>

<code>scope="col"</code>: specifies that the cell is a header for a column.
<code>scope="row"</code>: Specifies that the cell is a header for a row.
<code>scope="colgroup"</code>: specifies that the cell is a header for a group of columns.
<code>scope="rowgroup"</code>: specifies that the cell is a header for a group of rows.

<table>
  <caption>Timetable for the bus</caption>
  <tbody>
    <tr>
      <th></th>
      <th scope="col">Monday</th>
      <th scope="col">Tuesday</th>
      <th scope="col">Wednesday</th>
      <th scope="col">Thursday</th>
      <th scope="col">Friday</th>
      <th scope="col">Saturday</th>
    </tr>      
    <tr>
      <th scope="row">First bus</th>
      <td>05:00</td>
      <td>05:30</td>
      <td>05:30</td>
      <td>05:00</td>
      <td>06:30</td>
      <td>06:30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Last bus</th>
      <td>00:50</td>
      <td>00:50</td>
      <td>00:50</td>
      <td>00:50</td>
      <td>01:30</td>
      <td>23:50</td>
    </tr>
  </tfoot>
</table>

```html
<table>
  <caption>Timetable for the bus</caption>
  <tbody>
    <tr>
      <th></th>
      <th scope="col">Monday</th>
      <th scope="col">Tuesday</th>
      <th scope="col">Wednesday</th>
      <th scope="col">Thursday</th>
      <th scope="col">Friday</th>
      <th scope="col">Saturday</th>
    </tr>      
    <tr>
      <th scope="row">First bus</th>
      <td>05:00</td>
      <td>05:30</td>
      <td>05:30</td>
      <td>05:00</td>
      <td>06:30</td>
      <td>06:30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Last bus</th>
      <td>00:50</td>
      <td>00:50</td>
      <td>00:50</td>
      <td>00:50</td>
      <td>01:30</td>
      <td>23:50</td>
    </tr>
  </tfoot>
</table>
```

#Block elements(block-level elements)
 
<code>&lt;article&gt;</code>,<code>&lt;header&gt;</code>,<code>&lt;h1&gt;</code>,<code>&lt;nav&gt;</code>,<code>&lt;section&gt;</code>,<code>&lt;div&gt;</code>,<code>&lt;ul&gt;</code>,<code>&lt;ol&gt;</code>,<code>&lt;li&gt;</code>,<code>&lt;p&gt;</code> ...
A Block-level element <strong><u>occupies the entire horizontal space of its parent element (container)</u></strong>, and vertical space equal to the height of its contents, thereby creating a "block".
<strong>A block-level element always starts on a new line and takes up the full width available</strong> (stretches out to the left and right as far as it can). You can visualize them as a stack of boxes.
Find more about [Block elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)

```html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <!-- inline element -->
    <!-- inline element has width of content itself -->
    <!-- *** block element cannot be nested inside inline element *** -->
    <img width="200px" src="img/a.jpg" alt="">
    <img width="200px" src="img/a.jpg" alt="">
</body>

</html>
```

#Inline element(inline-level elements)
<code>&lt;span&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>,<code>&lt;video&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;br&gt;</code>,... 
Inline elements are those which <strong><u>only occupy the space bounded by the tags defining the element</u></strong>, <em>instead of breaking the flow of the content.</em>

<u>An inline element does not start on a new line</u> and <em><strong>only takes up as much width as necessary.</strong></em>

Find more about [Inline element](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements)
```html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <!-- inline element -->
    <!-- inline element has width of content itself -->
    <!-- *** block element cannot be nested inside inline element *** -->
    <img width="200px" src="img/a.jpg" alt="">
    <img width="200px" src="img/a.jpg" alt="">
</body>

</html>
```