HTML 테이블
HTML 테이블
테이블은 <table> 태그로 정의됩니다. 각 테이블에는 여러 행(<tr> 태그로 정의됨)이 있으며, 각 행은 여러 셀(<td> 태그로 정의됨)로 나뉩니다. 문자 td는 테이블 데이터, 즉 데이터 셀의 내용을 나타냅니다. 데이터 셀에는 텍스트, 그림, 목록, 단락, 양식, 수평선, 표 등이 포함될 수 있습니다.
예:
<html> <head> <meta charset="utf-8"> <title>Table in html</title> </head> <body> <p>水平表头</p> <table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> <tr> <td>zdd</td> <td>30</td> <td>male</td> </tr> </table> <p>垂直表头</p> <table border="1"> <tr> <th>Name</th> <td>autumn</td> </tr> <tr> <th>Age</th> <td>30</td> </tr> <tr> <th>Gender</th> <td>famale</td> </tr> </table> </body> </html>
시도해 보세요
경계 없는 테이블
테이블 정의 시 테두리 속성을 지정하지 않으면 테이블에 테두리가 없습니다.
<table>
<tr><td>zdd< ;/td><td>30</td></tr>
></table>
빈 셀
셀이 없으면 내용을 지정하면 셀이 비어 있고 테두리도 없습니다<table border="1"> <tr><td>zdd</td><td>30</td></ tr>
>제목이 있는 테이블
은 캡션 속성을 사용하는데 제목에 공백이 있으면 안 되는 것 같습니다. 그렇지 않으면 표시될 때 줄바꿈됩니다. ! 너무 우스꽝스러운 것 아닌가요?
<table border="1">
;zdd</td><td> ;30 < ;table border="1"><tr><th>이름</th><th colspan="2">전화번호</th></tr>< ;tr> 20 ;
행 또는 열 교차빌 게이츠 555 77 854 555 77 855
rowspan을 사용하여 열 확장
<table border="1">
<tr><th>이름</th><td> 빌 게이츠</td></tr>
<tr><th rowspan="2">전화</th><td>555 77 854</tr>
<tr><td>555 77 855</td></tr>
</table>
HTML 테이블 헤더
테이블의 헤더는 <th> 태그를 사용하여 정의됩니다.
대부분의 브라우저는 표 헤더를 굵은 중앙 텍스트로 표시합니다.
<table border="1">
<tr>
< th>헤더 1헤더 2 행 1, 셀 1 행 1, 셀 2 행 2, 셀 1
<td>2행, 셀 2</td>
</tr>
</table>
