HTML 테이블

테이블은 우리 일상생활에서 매우 흔한데, 웹페이지에서는 어떻게 테이블을 출력할까요?

<table> 태그는 HTML 테이블을 정의합니다.

간단한 HTML 테이블은 table 요소와 하나 이상의 tr, th 또는 td 요소로 구성됩니다.

tr 요소는 테이블 행, 번째 <를 정의합니다. 🎜> 요소는 테이블 헤더를 정의하고 td 요소는 테이블 셀을 정의합니다.

가장 간단한 형태를 만들어 보겠습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <td>1月份</td>
        <td>￥100</td>
    </tr>
    <tr>
        <td>二月份</td>
        <td>￥200</td>
    </tr>
</table>
</body>
</html>

프로그램 실행 결과:

cellspacing, 셀 사이의 거리

cellpadding, 셀 사이의 거리 텍스트와 셀 테두리는 픽셀 단위입니다.

border 텍스트에 테두리 추가 테두리를 border=0으로 설정하면 테이블에 테두리가 표시되지 않습니다.

위의 세 가지 속성 값은 자신의 요구 사항에 따라 직접 설정할 수 있습니다.

HTML 테이블 헤더

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

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

예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
    <th>月份</th>
    <th>金额</th>
    <tr>
        <td>1月份</td>
        <td>￥100</td>
    </tr>
    <tr>
        <td>二月份</td>
        <td>￥200</td>
    </tr>
</table>
</body>
</html>

프로그램 실행 결과 :

colspan 및 rowspan

<td> 태그에 colspan 및 rowspan 속성을 추가하면 셀을 병합할 수 있습니다. 수평 및 수직

인스턴스

병합 전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="20">
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>
</body>
</html>

프로그램 실행 결과:

병합 후

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="20">
    <tr>
        <td colspan="2">单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td rowspan="2">单元格</td>
        <td>单元格</td>
        <td rowspan="2">单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
    </tr>
</table>
</body>
</html>

코드 실행 결과를 살펴보세요.

패턴을 찾아보세요

더 보기 다중 인스턴스

이 예는 테두리가 없는 테이블을 보여줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<h4>这个表格没有边框:</h4>
<table>
    <tr>
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>500</td>
        <td>600</td>
    </tr>
</table>
<h4>这个表格没有边框:</h4>
<table border="0">
    <tr>
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>500</td>
        <td>600</td>
    </tr>
</table>
</body>
</html>

프로그램 실행 결과:

예

이 예 다양한 요소 내의 요소를 표시하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<table border="1">
    <tr>
        <td>
            <p>这是一个段落</p>
            <p>这是另一个段落</p>
        </td>
        <td>这个单元格包含一个表格:
            <table border="1">
                <tr>
                    <td>A</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td>C</td>
                    <td>D</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>这个单元格包含一个列表
            <ul>
                <li>apples</li>
                <li>bananas</li>
                <li>pineapples</li>
            </ul>
        </td>
        <td>HELLO</td>
    </tr>
</table>
</body>
</html>

코드 실행 결과:

HTML 테이블 태그

<테이블 너비 ="-642">

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元

태그<🎜><🎜> <🎜>설명<🎜><🎜>< tr> <table> 테이블 정의 <번째> 테이블 헤더 정의 <tr> 테이블 행 정의 <td> 표 셀 정의

<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体

<tfoot>

定义表格的页脚

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <tr> <td>1月份</td> <td>￥100</td> </tr> <tr> <td>二月份</td> <td>￥200</td> </tr> </table> </body> </html>

제출하다 코드 재설정

자동운전