table
목적
- HTML Table은 표 형식의 행과 열에 들어있는 데이터 묶음이라 할 수 있음
- 보통 table, th(제목, table header), tr(행, table row), td(데이터, table data) 정도를 쓴다.
- 특정 열에만 CSS를 적용하는 경우(배경 색 등) colgroup을 쓴다.
- table 안에 CSS를 세분화하려는 경우 thead, tbody, tfoot을 쓸 수도 있다.
예시
셀 테두리
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table style="width:100%"> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> </body> </html>셀 병합
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table style="width:100%"> <tr> <th>A</th> <th colspan="2">B</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> </body> </html>셀 병합 2
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table style="width:100%"> <tr> <th>A</th> <th colspan="2">B</th> </tr> <tr> <td rowspan="2">100</td> <td>200</td> <td>200</td> </tr> <tr> <td>300</td> <td>200</td> </tr> </table> </body> </html>
'HTML' 카테고리의 다른 글
| 10. HTML Forms (0) | 2024.07.08 |
|---|---|
| 9. HTML Lists (0) | 2024.07.08 |
| 7. HTML Tags (0) | 2024.07.08 |
| 6. HTML Entities (0) | 2024.07.08 |
| 5. HTML Heading, Links, Images, Semantics (0) | 2024.07.07 |