테이블 속성

테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있습니다.

1. border

2. border-collapse

3. border-top, border-bottom, border-right, border-left

4. td의 width, height

5. text-align

6. vertical-align

1. border 속성

border 속성으로 테이블의 테두리(border)를 설정할 수 있습니다.

<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 2px solid orange;
      }

    </style>
  </head>

  <body>
    <table>
      <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>

2. border-collapse 속성

border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현됩니다.

<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 2px solid orange;
      }
      table {
        border-collapse: collapse;
      }
    </style>
  </head>

  <body>
    <table>
...생략
    </table>
  </body>
</html>

3. border-top, border-bottom, border-right, border-left 속성

다음 속성은 top, bottom, right, left 방향으로 테두리를 설정할 수 있다.

<html>
  <head>
    <style>
      td {
        border-bottom: 1px solid blue;
      }
    </style>
  </head>

  <body>
    <table>
...생략
    </table>
  </body>
</html>

4. td의 width, height

td의 width, height 속성을 이용해 셸의 크기를 조절할 수 있다.

<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 2px solid orange;
      }
      table {
        border-collapse: collapse;
      }
      td {
        width: 200px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <table>
...생략
    </table>
  </body>
</html>

5. text-align 속성

테이블 요소 내부의 텍스트를 수평 방향 정렬을 설정합니다.

<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 2px solid orange;
      }
      table {
        border-collapse: collapse;
      }
      td {
        width: 200px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <td>사과</td>
        <td>바나나</td>
        <td>딸기</td>
      </tr>
      <tr>
        <td style="text-align: center">수박</td>
        <td style="text-align: center">자두</td>
        <td style="text-align: center">체리</td>
      </tr>
      <tr>
        <td style="text-align: right">키위</td>
        <td style="text-align: right">오렌지</td>
        <td style="text-align: right">참외</td>
      </tr>
    </table>
  </body>
</html>

6. vertical-align 속성

테이블 요소 내부의 텍스트를 수직 방향 정렬을 설정합니다.

<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 2px solid orange;
      }
      table {
        border-collapse: collapse;
      }
      td {
        width: 200px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <td style="vertical-align: top">사과</td>
        <td style="vertical-align: top">바나나</td>
        <td style="vertical-align: top">딸기</td>
      </tr>
      <tr>
        <td>수박</td>
        <td>자두</td>
        <td>체리</td>
      </tr>
      <tr id="last">
        <td style="vertical-align: bottom">키위</td>
        <td style="vertical-align: bottom">오렌지</td>
        <td style="vertical-align: bottom">참외</td>
      </tr>
    </table>
  </body>
</html>

저작자표시

'Web > 🧩 html + CSS' 카테고리의 다른 글

정렬 Tip (0)	2020.11.03
박스 모델 (0)	2020.11.03
크기 (0)	2020.11.03
background 속성 (0)	2020.11.03
font 속성 (0)	2020.11.03

''@

테이블 속성

테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있습니다.

1. border 속성

2. border-collapse 속성

3. border-top, border-bottom, border-right, border-left 속성

4. td의 width, height

5. text-align 속성

6. vertical-align 속성

'Web > 🧩 html + CSS' 카테고리의 다른 글

티스토리툴바

테이블 속성

테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있습니다.

1. border 속성

2. border-collapse 속성

3. border-top, border-bottom, border-right, border-left 속성

4. td의 width, height

5. text-align 속성

6. vertical-align 속성

'Web > 🧩 html + CSS' 카테고리의 다른 글

'Web/🧩 html + CSS' Related Articles

티스토리툴바