HTML: Tables

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

HTML TABLES

Creat a Table

Table: 데이터를 표현하는 하나의 방법

데이터를 표시하기 전 <table> 요소를 사용하여 데이터를 포함하는 테이블을 만들어야한다.

<table>
 
</table>

<table> 요소에는 표시할 모든 표 데이터가 포함된다.

 

Table Rows

<tr> element

테이블을 사용하는 많은 프로그램에서 테이블이 이미 미리 정의되어 있으므로, 이 테이블에는 데이터를 저장할 행, 열 및 셀이 포함된다. HTML에서는 이러한 모든 구성 요소를 생성해야 한다.

 

테이블에 데이터를 입력하는 첫 번째 단계는 테이블 행(table row) <tr> 요소를 사용하여 행을 추가하는 것이다.

<table>
  <tr>
  </tr>
  <tr>
  </tr>
</table>

 

Table Data

<td> element

행을 시각적으로 추가하기 위해서는 테이블에 데이터를 추가해야 한다.

그리고 각 셀 요소(cell element)가 정의되어야만 한다.

HTML에서는 테이블 데이터(table data) <td> 요소를 사용하여 데이터를 추가한다.

<table>
  <tr>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

결과

73

81

두 개의 데이터 지점을 추가하여 두 개의 데이터 셀을 만들었다.

테이블이 브라우저에 표시되는 경우, 한 행과 두 열이 있는 테이블이 표시된다.

 

Table Headings

<th> element

테이블 데이터는 데이터가 나타내는 것을 설명하는 제목이 없으면 의미가 없다.

테이블 제목(table heading) 요소인 <th>를 사용하여 행과 열에 제목을 추가한다.

<table>
  <tr>
    <th></th>
    <th scope="col">토요일</th>
    <th scope="col">일요일</th>
  </tr>
  <tr>
    <th scope="row">온도</th>
    <td>33</td>
    <td>27</td>
  </tr>
</table>

결과

	토요일	일요일
온도	33	27

 

먼저, 빈 제목, 토요일 제목, 일요일 제목 세 개의 제목을 열기 위해 새로운 행이 추가된다.

빈 표제 (<th></th>는 표 머리글을 해당 데이터 위에 올바르게 정렬하는 데 필요한 추가 표 셀을 작성하는 것이다.

두 번째 행에서는 하나의 표제(온도)가 행 제목으로 추가되었다.

 

다음 두 값 중 하나를 사용할 수 있는 범위 속성(scope attribute)을 사용한다.

• row(행) - 이 값은 제목이 행에 대한 것
• col(열) - 이 값은 제목이 열에 대한 것

Table Border

HTML의 이전 버전에서는 테두리를 경계 속성(border attribute)을 사용하여 테이블에 추가하고 정수와 동일하게 설정할 수 있다.

이 정수는 테두리 두께를 나타낸다.

<table border="1">
  <tr>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

결과

73

81

현재 사용되지 않는 코드이다.

 

페이지의 구조와 테이블이 보이는 방식을 분리하기 위해 CSS를 사용하여 HTML 문서에 스타일을 추가하는 방법을 이용한다.

CSS를 사용하여 동일한 테이블 테두리 효과를 얻을 수 있으며, 아래와 같은 방식으로 사용한다.

table, td {
  border: 1px solid black;
}

 

Question: 테두리를 만들기위해 CSS를 사용하는 이유가 무엇인가?

소프트웨어 엔지니어링에는 확장 가능하고 더 쉽게 유지 관리할 수 있는 코딩 아키텍처를 만드는 것을 목표로 하는 "관심사 분리(Concerns of Seperation, CoS"라는 설계 원칙이 있다.

웹 개발자의 경우, 이 원칙은 우리의 구조(HTML)를 우리의 프레젠테이션(CSS)과 분리하도록 한다.

(출처: https://discuss.codecademy.com/t/why-should-we-use-css-rather-than-html-to-create-borders-for-our-tables/341013)

 

Spanning Columns

colspan attribute

데이터는 colspan 속성을 사용하여 열에 걸쳐 있을 수 있으며, 표에 여러 열에 걸쳐 있는 데이터를 표시할 수 있다.

colspan 속성은 정수(1보다 크거나 같음)를 허용하여 정수 범위에 걸쳐 있는 열의 수를 나타낸다.

<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td colspan="2">Out of Town</td>
    <td>Back in Town</td>
  </tr>
</table>

결과

Monday	Tuesday	Wednesday
Out of Town		Back in Town

예제에서 Out of Town 데이터는 값 2(2개 열)를 사용하여 Monday 및 Tuesday 표 머리글에 걸쳐 있다.

Back in Town 데이터는 Wednesday 제목 아래에만 표시된다.

 

Question: 'colsapan' 속성은 <td> tag에만 사용할 수 있는가?

colspan 속성은 <th> 태그에도 사용할 수 있다.

접근성을 향상시키기 위해, 여러 열에 걸쳐 있는 표 제목을 작성할 때,  <th> 태그에 scope="colgroup" 속성을 포함해야 한다.

(출처: https://discuss.codecademy.com/t/can-the-colspan-attribute-only-be-used-within-td-tags/341016)

 

colspan attribute를 <th> tag에 사용할 때,  scope="colgroup" attribute을 opening <th> tag에 포함시킨다.

<table>
  <thead>
    <tr>
      <th scope="colgroup" colspan="2">Monday</th>
      <th>Tuesday</th>
      <th scope="colgroup" colspan="2">Wednesday</th>
      <th>Thursday</th>
      <th scope="colgroup" colspan="2">Friday</th>
    </tr>
    
  <tbody>
    <tr>
      <td>Maths</td>
      <td>Science</td>
      <td></td>
      <td>Geography</td>
      <td>Chemistry</td>
      <td></td>
      <td>English</td>
      <td>Physics</td>
    </tr>
  </tbody>
</table>

결과

Monday		Tuesday	Wednesday		Thursday	Friday
Maths	Science		Geography	Chemistry		English	Physics

 

 

Spanning Rows

rowspan/scope="rowgroup"

데이터는 rowspan 속성을 사용하여 여러 행에 걸쳐 있을 수 있다.

rowspan 속성은 여러 행에 걸쳐 있는 데이터에 사용된다(이벤트는 특정 날짜에 여러 시간 동안 진행됨).

정수(1보다 크거나 같음)를 사용하여 교차하는 행 수를 나타낸다.

<table>
  <tr> <!-- Row 1 -->
    <th></th>
    <th>Saturday</th>
    <th>Sunday</th>
  </tr>
  <tr> <!-- Row 2 -->
    <th>Morning</th>
    <td rowspan="2">Work</td>
    <td rowspan="3">Relax</td>
  </tr>
  <tr> <!-- Row 3 -->
    <th>Afternoon</th>
  </tr>
  <tr> <!-- Row 4 -->
    <th>Evening</th>
    <td>Dinner</td>
  </tr>
</table>

결과

	Saturday	Sunday
Morning	Work	Relax
Afternoon
Evening	Dinner

 

1. 첫번째 행에는 빈 셀과 두 개의 열 머리글이 포함된다.
2. 두번째 행에는 'Saturday' 열 아래의 두 행에 걸쳐 있는 'Work'과 함께 'Morning' 행 제목이 포함된다.
   'Relax' 항목은 'Sunday' 열 아래의 세 행에 걸쳐있다.
3. 세번쨰 행에는 'Afternoon' 행 제목만 포함된다.
4. 네번째 행에는 "Relax"가 옆에 있는 셀로 확장되기 때문에 'Dinner' 항목만 포함된다.

rowspan attribute를 <th> tag에 사용할 때, scope="rowgroup" attribute을 opening <th> tag에 포함시킨다.

 

Table Body

<tbody> element

데이터릐 확장에 따라 테이블을 관리하기 쉽도록 테이블 <tbody> element를 통해 분할 기능을 사용한다.

<tbody> 요소는 표 제목을 제외한 표의 모든 데이터를 포함해야 한다.

<table>
  <tbody>
    <tr>
      <th></th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr>
      <th>Morning</th>
      <td rowspan="2">Work</td>
      <td rowspan="3">Relax</td>
    </tr>
    <tr>
     <th>Afternoon</th>
    </tr>
    <tr>
      <th>Evening</th>
      <td>Dinner</td>
    </tr>
  </tbody>
</table>

결과

	Saturday	Sunday
Morning	Work	Relax
Afternoon
Evening	Dinner

 

모든 테이블 데이터가 table body 요소 내에 포함된다.

표제(heading) 또한 table body에 포함되어 있다.

 

Question: 왜 <tbody> tag를 통해 section off를 하는가?

<tbody>태그와 <tfoot>태그는 표에 의미적인 의미를 부여하여 여러 가지 방법으로 사용자 환경을 개선한다.

1. 시각 장애인을 위한 향상된 화면 판독 경험 각 페이지에 인쇄를 위해 및 정보를 표시한다.
2. 약간의 CSS가 있으면 긴 테이블을 스크롤하면서 <thead>와 <tfoot>정보를 볼 수 있다.

Table Head

<thead> element

테이블 본체가 섹션으로 분리된 경우, <thead> 요소를 사용하여 테이블의 칼럼 제목을 섹션으로 분리하는 방법을 사용하기도 한다.

<table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">Saturday</th>
      <th scope="col">Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Morning</th>
      <td rowspan="2">Work</td>
      <td rowspan="3">Relax</td>
    </tr>
    <tr>
     <th scope="row">Afternoon</th>
    </tr>
    <tr>
      <th scope="row">Evening</th>
      <td>Dinner</td>
    </tr>
  </tbody>
</table>

결과

	Saturday	Sunday
Morning	Work	Relax
Afternoon
Evening	Dinner

 

table heading은 <thead> 요소 안에 포함된다.

table heading을 포함하려면 table의 head는 하나의 행이 필요하다.

 

column heading은<thead> 요소 아래에 표시된다.

<thead> 요소의 scope attribute을 사용하여 <th> 요소가 "row" heading 또는 "col" heading으로 사용되는지 여부를 나타낼 수 있다.

 

Table Footer

<tfoot> element

테이블의 하단 부분은 <tfoot> 요소를 사용하여 분할할 수 있다.

Footer는 합계, 차이 및 기타 데이터 결과를 포함하는 데 사용된다.

<table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$10M</td>
      <td>$7.5M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$12M</td>
      <td>$5M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$22M</td>
      <td>$12.5M</td>
    </tr>
  </tfoot>
</table>

결과

Quarter	Revenue	Costs
Q1	$10M	$7.5M
Q2	$12M	$5M
Total	$22M	$12.5M

 

Styling with CSS

기본 테이블은 테두리가 없고, 글꼴 색상은 검은색이며, 서체는 다른 HTML 요소에 사용되는 것과 동일한 유형이다. CSS(Cascading Style Sheets)는 웹 개발자들이 웹 페이지의 HTML 콘텐츠를 스타일링하기 위해 사용하는 언어로,

CSS를 사용하여 테이블을 스타일링할 수 있다.

table, th, td {
  border: 1px solid black;
  font-family: Arial, sans-serif;
  text-align: center;
}

---

참고

• https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-learn-html-tables/cheatsheet

Web Development Fundamentals: Learn HTML: Tables Cheatsheet | Codecademy

• https://en.wikipedia.org/wiki/Table_(information)

Table (information) - Wikipedia