HTML 테이블 레이아웃을 사용하여 데이터 표시 페이지를 만드는 방법

HTML 테이블 레이아웃을 사용하여 데이터 표시 페이지를 만드는 방법

HTML 테이블은 데이터 표시 페이지를 만드는 데 사용할 수 있는 일반적인 레이아웃 도구입니다. 테이블의 구조와 속성을 합리적으로 활용하여 명확하고 읽기 쉬우며 아름다운 데이터 표시 페이지를 만들 수 있습니다.

1. 기본 테이블 구조

HTML에서 테이블은 table, tr, td 태그로 구성됩니다. table 태그는 테이블을 정의하는 데 사용되고, tr 태그는 테이블 행을 정의하는 데 사용되며, td 태그는 테이블 셀을 정의하는 데 사용됩니다. 다음은 기본 테이블 구조의 예입니다.

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

위 예에서 제목 표시줄은 th 태그를 사용하여 정의되고 데이터 행은 td 태그를 사용하여 정의됩니다. th 태그는 일반적으로 제목이나 열 이름을 표시하기 위해 테이블의 첫 번째 행에 사용되는 반면, td 태그는 일반 테이블 데이터를 표시하는 데 사용됩니다.

2. 테이블 스타일 설정

CSS를 통해 테이블 ​​스타일을 설정할 수 있습니다. 테이블 스타일을 사용자 정의하려는 목적을 달성하기 위해 table, tr 및 td 태그에 대해 다양한 스타일을 설정할 수 있습니다. 다음은 간단한 예입니다.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  
  th {
    background-color: #f0f0f0;
    font-weight: bold;
  }
</style>

위 예에서는 테이블 레이블의 너비를 100%로 설정하여 border-collapse:collapse 속성, 즉 테두리를 사용하여 상위 컨테이너의 너비를 채웁니다. 테이블은 A로 병합될 수 있습니다. th 및 td 태그는 모두 테두리 스타일을 설정하고 th 태그는 배경색과 글꼴 굵기도 설정합니다.

3. 셀 병합

경우에 따라 더 복잡한 데이터를 표시하기 위해 셀을 병합해야 할 수도 있습니다. HTML은 셀을 병합하기 위해 colspan 및 rowspan 속성을 제공합니다. 다음은 colspan 속성을 사용하여 테이블 셀을 병합하는 예입니다.

<table>
  <tr>
    <th colspan="2">合并单元格</th>
    <th>普通单元格</th>
  </tr>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
</table>

위 예에서는 colspan="2"를 사용하여 첫 번째 행의 제목 표시줄 셀을 두 열에 걸쳐 병합하고 rowspan="2"를 사용합니다. 첫 번째 열의 셀이 두 행에 걸쳐 병합됩니다.

4. 테이블 헤더와 테이블 본문을 사용하여 데이터 그룹화

대규모 데이터 세트의 경우 테이블 헤더와 테이블 본문을 각각 태그에 넣을 수 있습니다. 이렇게 하면 테이블이 더욱 구조화되고 렌더링 시 성능이 더욱 최적화됩니다. 예는 다음과 같습니다.

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

위 예에서는 태그를 사용하여 테이블의 헤더를 정의하고

태그를 사용하여 테이블 본문을 정의합니다.

위의 기술을 적절히 사용하면 HTML 테이블 레이아웃을 사용하여 아름답고 읽기 쉬운 데이터 표시 페이지를 만들 수 있습니다. 물론, 실제 필요에 따라 CSS 스타일을 추가하여 배경색 설정, 테두리 스타일 설정 등과 같이 테이블을 아름답게 할 수 있습니다.

위 내용이 데이터 표시 페이지 제작에 도움이 되었으면 좋겠습니다!

위 내용은 HTML 테이블 레이아웃을 사용하여 데이터 표시 페이지를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!