When should you Not use HTML tables?
Layout tables reduce accessibility for visually impaired users Tables produce tag soup Tables are not automatically responsive
Active learning : Creating your first tables
<table >
<tr>
<td> hi iam first cell </td>
</tr>
</table >
sample:
| hi i am first cell |
why ar headers usefule
along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accesible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful
Allowing cells to sapn multiple rows and columns
sample :
| Animals | |
|---|---|
| Hippopotamus | |
| Horse | Mare |
| Stallion | |
| Crocodile | |
| Chicken | Hen |
| Rooster | |
providing common styling to columns
html has a method of defining styling information for an entire column of data all in one place. - <co>and <colgorup> elements.
| mon | thu | |
|---|---|---|
| 1st | english | |
| 2st | english |
thead, tfoot 및 tbody로 구조 추가
이와 같은 방법은 사용자 테이블에 시각적 향상을 가져오지 않으나, 스타일링과 레이아웃에 유용합니다.
사용하려면 :
- <thead>는 일반적으로 머리글. 첫 번째 행이지만, 반드시는 아님.
- <tfoot>은 바닥글,
- <tboody>은 본문,
sampe:
| Purchase | Location | Date | Evaluation | Cost (€) |
|---|---|---|---|---|
| SUM | 118 | |||
| Haircut | Hairdresser | 12/09 | Great idea | 30 |
| Lasagna | Restaurant | 12/09 | Regrets | 18 |
| Shoes | Shoeshop | 13/09 | Big regrets | 65 |
| Toothpaste | Supermarket | 13/09 | Good | 5 |
Nesting tables
it is possible too nest a table inside another one
| title1 | title2 | title3 | |||
|---|---|---|---|---|---|
| total | sum | su_sum | |||
| 1 | 2 | 3 | |||
|
b | c | |||
| a | b | c | |||
| d | e | f |
the id and headers attribute
an alternative to using the scope attribute tis to use id and headers attributes to create associations between headers and cells.
- you add a unique id to each th element
- you add headrs attribute to each td element. each hdeaders attribute has to contaion a list of the ids of all the th elements that act as a header for that cell, seperated by spaces.
developer의 기본 HTML 학습을 정의 하며, 나름 몰랐던 부분 기초적인 부분을 스스로 정리를 해보았습니다. 내용이 번잡할수 있습니다. 실제 내용은 정규 홈페이지에서 확인하시면 좋겠습니다.