-
05. 표프론트엔드/HTML 2020. 9. 1. 18:20반응형SMALL
# What? 이게 뭔데?
table : 표를 만들고 싶을 때 사용
caption : 표 설명
thead : 표 제목 영역
tbody : 표 내용 영역
tr : 행
th : 제목 셀
td : 내용 셀
# How? 어떻게 쓰는데?
<!DOCTYPE html> <!-- 이 문서가 HTML5 문서라는 뜻 --> <html lang="ko"> <!-- 웹 문서의 시작 --> <head> <!-- 웹 문서에 대한 정보를 담는 태그 --> <meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 하라는 뜻 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 초기엔 1배율로 페이지를 보여주라는 뜻 --> <title>Document</title> <!-- 문서 제목 --> <link rel="stylesheet" href="./style.css"> <!-- css를 연결하는 태그 --> <script src="./common.js"></script> <!-- js를 연결하는 태그 --> <style> caption {display:none;} th, td {padding:10px; border:1px solid #E1e1e1;} th {background-color:blue; color:#fff;} </style> </head> <body> <!--제목만으로 구성된 가로행이 따로 있는 경우 --> <table> <caption>테스트 표</caption> <thead> <tr> <!--scope는 이 제목에 대한 내용이 세로열로 나열되는지(col), 가로행으로 나열되는지 표기(row)--> <th scope="col">제목1</th> <th scope="col">제목2</th> </tr> </thead> <tbody> <tr> <td>내용1</td> <td>내용2</td> </tr> </tbody> </table> <br/><br/> <!-- 제목만으로 구성된 가로행이 따로 없는 경우 -> 이럴 경우 thead로 제목 영역을 따로 잡지 않음 --> <table> <caption>테스트 표2</caption> <tbody> <tr> <!--scope는 이 제목에 대한 내용이 세로열로 나열되는지(col), 가로행으로 나열되는지 표기(row)--> <th scope="row">제목1</th> <td>내용1</td> </tr> <tr> <th scope="row">제목2</th> <td>내용2</td> </tr> </tbody> </table> <!-- 셀 합치기 --> <table> <caption>테스트 표</caption> <thead> <tr> <!-- colspan=2는 가로로 2칸 영역을 차지하라는 뜻(열 2칸치를 먹어라) --> <th scope="col" colspan="2">제목1</th> </tr> </thead> <tbody> <tr> <!-- rowspan=2는 세로로 2칸 영역을 차지하라는 뜻(행 2칸치를 먹어라) --> <td rowspan="2">내용1</td> <td>내용2</td> </tr> <tr> <td>내용1</td> </tr> </tbody> </table> </body> </html># Practice 연습
아래와 같은 형태로 table 구성해보기(css는 안꾸며도됨)
직책 성명 전화번호 이메일 팀장 신빵찡 02-0513-1234 test@naver.com 팀원 빵상 test@daum.net * 코드참고 : https://github.com/ShinHyungJune/publishing-course/tree/html-05-table
LIST