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> | 定义表格单元 |
| <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>
