HTML 설정 테이블-프런트엔드 Q&A-php.cn

HTML 설정 테이블

WBOY

풀어 주다： 2023-05-15 17:19:09

원래의

1404명이 탐색했습니다.

HTML의 테이블은 데이터를 표시하는 데 사용되는 마크업 언어입니다. 웹 페이지 레이아웃 디자인에 있어서 테이블은 중요한 요소이며, 몇 가지 설정을 통해 더욱 아름다운 효과를 나타내도록 할 수 있습니다. 이 기사에서는 독자가 테이블 사용을 더 잘 익힐 수 있도록 HTML에서 테이블을 설정하는 몇 가지 기술을 소개합니다.

표 테두리 설정

표 테두리를 설정하면 독자가 표를 더 명확하고 쉽게 구별할 수 있습니다. 일반적인 설정 방법은 테두리 속성을 사용하는 것입니다. border 속성은 테이블 테두리의 너비와 색상을 설정할 수 있습니다. 샘플 코드는 다음과 같습니다.

<table border="1">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

로그인 후 복사

여기서 border="1"은 테두리 너비가 1픽셀임을 의미합니다. 물론 더 큰 값을 설정하여 테두리 너비를 늘릴 수도 있습니다. 테두리의 색상과 스타일을 제어하려면 CSS 속성을 사용하여 설정할 수도 있습니다.

테이블 너비 설정

테이블에 내용이 너무 많으면 테이블이 자동으로 넓어집니다. 그러나 테이블이 위치한 컨테이너의 너비가 제한되면 테이블의 내용이 넘치게 됩니다. 컨테이너. 이러한 상황을 방지하려면 테이블 너비를 설정하여 테이블 크기를 제어할 수 있습니다. 테이블 너비를 설정하는 방법에는 여러 가지가 있습니다. 이 문서에서는 두 가지 일반적인 방법을 소개합니다.

(1) 너비 속성을 사용합니다. width 속성은 테이블의 너비를 설정할 수 있으며, 이는 백분율 또는 픽셀 값일 수 있습니다. 샘플 코드는 다음과 같습니다.

<table width="50%">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

로그인 후 복사

(2) CSS 스타일을 사용합니다. CSS 스타일을 통해 표의 크기와 스타일을 더 잘 제어할 수 있습니다. 샘플 코드는 다음과 같습니다.

<style>
  table {
    width: 50%;
    border-collapse: collapse;
  }
  th,td {
    border: 1px solid black;
    padding: 5px;
  }
</style>

<table>
  <tr>
    <th>第一列</th>
    <th>第二列</th>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

로그인 후 복사

위 샘플 코드에서는 CSS 스타일을 사용하여 테이블의 너비, 테두리 간격 및 셀 패딩을 설정했습니다.

테이블 헤더 및 테이블 본문 설정

테이블에서 일부 데이터는 더 중요하며 테이블 헤더를 사용하여 식별해야 할 수도 있습니다. 헤더가 설정되어 있지 않으면 독자가 표에서 필요한 정보를 빠르게 찾기 어려울 수 있습니다. 그래서 테이블을 설정할 때 헤더와 테이블 본문을 표시해야 합니다. 샘플 코드는 다음과 같습니다.

<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>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

로그인 후 복사

위 샘플 코드에서는 thead 및 tbody 태그를 사용하여 테이블을 테이블 헤더와 테이블 본문의 두 부분으로 나눕니다.

행과 열 병합

표에서 일부 셀 내용이 동일할 경우 행과 열을 병합하여 표의 크기를 줄이고 내용을 복제할 수 있습니다. 샘플 코드는 다음과 같습니다.

<table border="1">
  <tr>
    <td rowspan="2">第一列</td>
    <td>第二列</td>
    <td colspan="2">第三列</td>
  </tr>
  <tr>
    <td>第四列</td>
    <td>第五列</td>
  </tr>
</table>

로그인 후 복사

위 샘플 코드에서는 rowspan 속성을 사용하여 첫 번째 열 셀을 두 개의 행으로 병합하고 colspan 속성을 사용하여 세 번째 열 셀을 두 개의 열로 병합합니다.

셀 배경색 및 글꼴 색상 설정

테이블에서 특정 정보를 강조 표시해야 하는 경우 셀 배경색 및 글꼴 색상을 설정하여 목적을 달성할 수 있습니다. 일반적으로 사용되는 설정은 CSS 스타일과 bgcolor 속성을 사용하는 것입니다. 샘플 코드는 다음과 같습니다.

<style>
  td.red { background-color: red; color: white; }
  td.green { background-color: green; color: white; }
</style>

<table>
  <tr>
    <td class="red">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td class="green">第三列</td>
    <td>第四列</td>
  </tr>
</table>

或者

<table>
  <tr>
    <td bgcolor="red" color="white">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td bgcolor="green" color="white">第三列</td>
    <td>第四列</td>
  </tr>
</table>

로그인 후 복사

위 샘플 코드에서는 CSS 스타일과 bgcolor/color 속성을 사용하여 셀의 배경색과 글꼴 색상을 설정했습니다.

Summary

HTML의 테이블은 일반적으로 사용되는 마크업 언어로, 합리적인 설정을 통해 독자가 테이블의 데이터를 더 잘 이해할 수 있도록 도와줍니다. 이 문서에서는 표 테두리, 표 너비, 표 머리글 및 표 본문 설정, 행과 열 병합, 셀 배경 및 글꼴 색상 설정 등 HTML에서 표를 설정하는 몇 가지 기술을 소개합니다. 이러한 기술을 익히면 테이블 태그를 더 잘 활용하고 더 아름다운 웹 페이지 레이아웃을 만들 수 있습니다.

위 내용은 HTML 설정 테이블의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!