DEV Community

Dahye Ji
Dahye Ji

Posted on • Updated on

Table tag, block element and inline element

tr, th, td

<tr>: a row of cells in a table.
<th>: a cell as header of a group of table cells
<td>: a cell of a table that contains data

Book Name Total
1 Harry Potter 100
<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>
Enter fullscreen mode Exit fullscreen mode

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개 합침
<tr>
    <td colspan="2">Total Sales</td>
    <td>600</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

thead, tbody, tfoot

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

Book Name Total
1 Harry Potter 100
2 Hunger Game 200
3 Lord of the rings 300
Total 600
<!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>
Enter fullscreen mode Exit fullscreen mode

caption, colgroup

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

Table tag

<!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>
Enter fullscreen mode Exit fullscreen mode

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 can be used by screen readers

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

Timetable for the bus
Monday Tuesday Wednesday Thursday Friday Saturday
First bus 05:00 05:30 05:30 05:00 06:30 06:30
Last bus 00:50 00:50 00:50 00:50 01:30 23:50
<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>
Enter fullscreen mode Exit fullscreen mode

Block elements(block-level elements)

<article>,<header>,<h1>,<nav>,<section>,<div>,<ul>,<ol>,<li>,<p> ...
A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block".
A block-level element always starts on a new line and takes up the full width available (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

<!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>
Enter fullscreen mode Exit fullscreen mode

Inline element(inline-level elements)

<span>, <a>, <button>,<video>, <input>, <br>,...
Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.

An inline element does not start on a new line and only takes up as much width as necessary.

Find more about Inline element

<!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>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)