[chap.6]표 만들기
1. 기본 틀 만들기
먼저 표를 만들어준다.
table element 입력
이제 행(row), 열(column), 셀(cell)로 표를 구성해볼 것이다.
표에 두개의 행(table row, <tr>)을 만들어 주었다.
두 번째 행에 두개의 데이터(table data,<td>)를 주었다.
비어있던 첫번째 행에 세개의 데이터를 주었다. 아니 저건 그냥 데이터가 아니다
제목 셀(table head,<th>)이다.
| table head | table head | table head |
| table head(아닐 때도 있음) | data | data |
| table head(아닐 때도 있음) | data | data |
보통의 표는 위와같이 맨 윗줄에 가로로, 맨 왼쪽에 세로로, 제목셀이 존재한다. (늘 예외는 있다)
이제 앞서 작성한 코드를 렌더링 해보자
(여기엔 table이랑 table td에 따로 스타일을 줘서 border가 보이는 거임)
작성한 것과 같이 두개의 row가 있다.
첫번 째 row에는 3개의 heading이 있는데 첫번째는 쓰지 않기 때문에 비어두었다(<th></th>).
그 다음 순서대로 Saturday, Sunday의 제목을 부여해줬는데
<th>Saturday</th>가 아닌 <th scope="col">Saturday</th> 이다.
scope attribute에는 row와 col 두가지 value가 있다.
- row - this value makes it clear that the heading is for a row.
- col - this value makes it clear that the heading is for a column.
즉, scope attribute는 heading이 coloum의 것인지 row의 것인지 명확히 하는 것에 목적이 있다.
2. 셀 병합하기
2-1. Spanning Columns
바로 예시를 들어 이해해보자
span a <td> element across two columns
우측의 column과 병합이 된 걸 확인할 수 있다.
2-2. Spanning rows
행 병합은 2-1의 열 병합을 행으로 바꿨을 뿐이다. 바로 예시를 들어보자
차근차근 살펴보면 참 쉽죠~~
위와같이 코멘트까지 달아주면 보기에도 훨씬 편하다.
표를 작성할 때 미리 스케치를 해놓고 그걸 토대로 코드를 작성하면 될 것 같다.
틀을 만들었으면 표를 꾸밀 수도 있다. 이는 CSS에서 깊이 다뤄보겠다
3. Table Head, Body, Footer
table 내에서도
head <thead> (<th>와 헷갈리지 말기)
body <tbody>
footer <tfoot>
로 나뉜다.
이렇게 섹션을 나눠놓는 것은 이후에 CSS로 스타일링을 하는 것 등에 활용된다.
While the <thead>, <tbody>, and <tfoot> (next exercise) tags may not affect the appearance of tables, they do create semantic meaning which can improve the user experience in a number of ways.
For instance, with just a bit of CSS the <thead> tag allows developers to more readily target table headings and style them such that this information can be seen while scrolling through long tables.
What’s more, these semantic tags allow software like screen readers and search engines to make better sense of our table content.
4. Styling with CSS
계속 언급된 CSS는 어떻게 쓰이는 걸까? 함 봅시다
위와같이 html과 같은 폴더에 파일이 있다.
style.css탭을 클릭하면
이런 느낌이다. bland한 html파일에 색을 넣고 폰트에 변화를 주어 스타일링해주는 것이다.
이런식으로 스타일링을 해주면 3번에 예시로 든 table은
이렇게 예쁘게 나온다!
처음 시작할 땐 html CSS Javascript 뭐가 뭔지 그 쓰임조차도 몰랐었다.
가장 기본이 된다고 해서 무지한 상태로 일단 html을 시작했다.
html의 작은 기능 하나하나 알아가는 것도 재미있었는데
이렇게 CSS의 필요성까지 이해하게 되니 또 설렌다.
새로운 대륙에 발 딛은 느낌..
여전히 모르는 것 투성이지만 열심히만 하면 분명 잘 할 거 같다!
chap3 정리
- The <table> element creates a table.
- The <tr> element adds rows to a table.
- To add data to a row, you can use the <td> element.
- Table headings clarify the meaning of data. Headings are added with the <th> element.
- Table data can span columns using the colspan attribute.
- Table data can span rows using the rowspan attribute.
- Tables can be split into three main sections: a head, a body, and a footer.
- A table’s head is created with the <thead> element.
- A table’s body is created with the <tbody> element.
- A table’s footer is created with the <tfoot> element.
- All the CSS properties you learned about in this course can be applied to tables and their data.