HTML 테이블 정의하기

HTML 테이블은 <table> 태그로 정의됩니다.

각 테이블 행은 <tr> 태그로 정의됩니다. 표 머리글은 <th> 태그로 정의됩니다. 기본적으로 테이블 표제는 굵게 표시되고 중앙에 배치됩니다. 테이블 데이터 / 셀은 <td> 태그로 정의됩니다.

예

<table style = "width : 100 %">

  <tr>

    <th> 이름 </ th>

    <성> 성 </ th>

    <th> 연령 </ th>

  </ tr>

  <tr>

    <td> 질 </ td>

    <td> 스미스 </ td>

    <td> 50 </ td>

  </ tr>

  <tr>

    <td> Eve </ td>

    <td> 잭슨 </ td>

    <dd> 94 </ td>

  </ tr>

</ table>

참고 : <td> 요소는 테이블의 데이터 컨테이너입니다.

여기에는 모든 종류의 HTML 요소가 포함될 수 있습니다. 텍스트, 이미지, 목록, 다른 테이블 등

HTML 표 - 테두리 추가

표에 테두리를 지정하지 않으면 테두리없이 테두리가 표시됩니다.

테두리는 CSS 테두리 속성을 사용하여 설정됩니다.

예

table, th, td {

    border: 1px solid black;

}

표 셀과 표 셀의 테두리를 정의해야합니다.

HTML 표 - 축소 된 테두리

테두리를 하나의 테두리로 축소하려면 CSS border-collapse 속성을 추가하십시오.

예

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

HTML 표 - 셀 채우기 추가

셀 패딩은 셀 내용과 경계 사이의 간격을 지정합니다.

패딩을 지정하지 않으면 테이블 셀이 패딩없이 표시됩니다.

패딩을 설정하려면 CSS 패딩 속성을 사용하십시오.

예

th, td {

    padding: 15px;

}

HTML 표 - 왼쪽 맞춤 표제

기본적으로 테이블 표제는 굵게 표시되고 중앙에 배치됩니다.

표 머리글을 왼쪽 정렬하려면 CSS text-align 속성을 사용하십시오.

예

th {

    text-align: left;

}

HTML 표 - 테두리 간격 추가

테두리 간격은 셀 사이의 간격을 지정합니다.

표의 테두리 간격을 설정하려면 CSS border-spacing 속성을 사용하십시오.

예

table {

    border-spacing: 5px;

}

참고 : 테이블에 테두리가 축소되어 있으면 테두리 간격이 적용되지 않습니다.

HTML 표 - 여러 열을 포함하는 셀

셀이 둘 이상의 열에 스팬되게하려면 colspan 속성을 사용하십시오.

예

<table style = "width : 100 %">

  <tr>

    <th> 이름 </ th>

    <th colspan = "2"> 전화 </ th>

  </ tr>

  <tr>

    <td> 빌 게이츠 </ td>

    <td> 55577854 </ td>

    <td> 55577855 </ td>

  </ tr>

</ table>