태그 정리
<table> -테이블 생성 <caption> -테이블의 설명 또는 제목(필수아님) <tr> -테이블의 행 <td> -테이블의 데이터 셀 <thead> -테이블의 헤더 부분(tbody 앞에 사용) <tbody> -테이블의 본문 <tfoot> -테이블의 푸터 부분(tbody 뒤에 사용) <th> -열 또는 행의 헤더 -scope 속성을 통해 row, col중에 선택하여 사용한다. <colspan> -열 합치기 <rowspan> -행 합치기
사용예시
<body> <table > <thead> <tr> <th scope="row">요일</th> <th>월</th> <th>화</th> <th>수</th> <th>목</th> <th>금</th> </tr> </thead> <tbody> <tr> <th scope="row">1교시</th> <td>체육</td> <td>수학</td> <td>국어</td> <td>국어</td> <td>미술</td> </tr> <tr> <th scope="row">2교시</th> <td>미술</td> <td>체육</td> <td>수학</td> <td>국어</td> <td>영어</td> </tr> <tr> <th scope="row">3교시</th> <td>음악</td> <td>미술</td> <td>체육</td> <td>수학</td> <td>음악</td> </tr> <tr> <th scope="row">4교시</th> <td>수학</td> <td>수학</td> <td>체육</td> <td>수학</td> <td>음악</td> </tr> <tr> <th scope="row">5교시</th> <td>영어</td> <td>영어</td> <td>수학</td> <td>체육</td> <td>수학</td> </tr> </tbody> <tfoot> <tr> <th scope="row">6교시</th> <td>청소</td> <td>청소</td> <td>청소</td> <td>청소</td> <td>청소</td> </tr> </tfoot> </table> </body>실행결과
열과 행을 병합하는 것도 가능하다
<body> <table > <tr> <td rowspan="2">10점</td> <td>20점</td> <td>30점</td> </tr> <tr> <td colspan="2">50점------</td> </tr> <tr> <td>70점</td> <td>80점</td> <td>90점</td> </tr> </table> </body>사용결과
아직 CSS를 다루지 않아 표같은 표를 만들지 못했다.
현재까지 공부하며 느낀점
HTML의 경우 사용자가 보기에는 똑같은 화면일 수 있지만 유지보수나 다른 사람이 코드를 봤을 때의 관점에서 바라보면 어떤 내용을 담고있는지 알려주기 위해 각각의 역할이 다 정해져있는 것 같다. 이를 적절히 잘 활용하면 좋은 HTML코드가 나올 것 같고, 그렇게 작성할 수 있도록 노력해야겠다.
꾸준히 진득하게 앞으로