Design

  • code 적기 전에 레이아웃을 스케치
  • row와 column 수를 결정
  • 어떤 row/col이 멀티 cell 로 뻗어갈지 결정

The Tags

  • <table> : 컨테이너 tag
  • <tr> … </tr> : rows
  • <td> … </td> : colums

Simple Table

<table>
    <tr><td>one</td></td><td>two</td><td>three</td></tr>
    <tr><td>four</td></td><td>five</td><td>six</td></tr>
</table>

Table Headings

  • table heading을 얼마나 추가해야 하나?
    • 데이터 정의한 top은 bold cells
  • 일부 사람들은 bold font를 사용하고, 우리는 semantic tag를 사용
  • <th> … </th> : table heading
<table>
    <tr><th>row one</th><th>row two</th><th>row three</th></tr>
    <tr><td>one</td></td><td>two</td><td>three</td></tr>
    <tr><td>four</td></td><td>five</td><td>six</td></tr>
</table>

Spanning Multiple Cells

  • 테이블이 완벽하게 grid가 아닐 때 사용
  • rowspancolspan을 사용해서 결합할 수 있다.

The Border Attribute

  • table이 가질 수 있는 attribute가 있지만 HTML안에서 스타일링은 피해야한다.
    (CSS 에서 사용해서 결정하는 것이 낫다.)

Captions

  • 테이블에 의미 정보를 넣기 위해 heading (h2, h3..) 는 피해야한다.
  • 사람들이 테이블이 어떤 것인지 알 수 있게 <caption>을 사용하자

Review

  • 테이블은 표 데이터를 위해 사용해야 한다.
  • 코드 작성 전에 테이블을 그려 봐야 한다.
  • unclosed tag를 확인하자.

공부 위치 – https://www.coursera.org/learn/html/lecture/HtqUe/02-08-tables