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>

시도해 보세요

경계 없는 테이블

테이블 정의 시 테두리 속성을 지정하지 않으면 테이블에 테두리가 없습니다.

빈 셀

셀이 없으면 내용을 지정하면 셀이 비어 있고 테두리도 없습니다

해결되면 어떻게 되나요? 이 방법은 빈 셀에 공백을 추가하는 것입니다. HTML은 추가 공백을 무시하므로 공백을 직접 추가할 수는 없지만 줄바꿈되지 않는 공백을 나타내려면 를 추가합니다.

<table border="1"> <tr><td>zdd</td><td>30</td></ tr>
>제목이 있는 테이블

은 캡션 속성을 사용하는데 제목에 공백이 있으면 안 되는 것 같습니다. 그렇지 않으면 표시될 때 줄바꿈됩니다. ! 너무 우스꽝스러운 것 아닌가요?
<table border="1">

;zdd</td><td> ;30 20 ;

행 또는 열 교차

colspan을 사용하여 행 확장

< ;table border="1"><tr><th>이름</th><th colspan="2">전화번호</th></tr>< ;tr>빌 게이츠555 77 854555 77 855

rowspan을 사용하여 열 확장

HTML 테이블 헤더

테이블의 헤더는 <th> 태그를 사용하여 정의됩니다.

대부분의 브라우저는 표 헤더를 굵은 중앙 텍스트로 표시합니다.

지속적인 학습

새로운 파일

<html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <h4>背景颜色：</h4> <table border="1" bgcolor="yellow"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Tom</td> </tr> </table> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear