본문 바로가기
HTML

HTML(테이블)_2024-07-01

by 앵보몬 2024. 7. 1.
728x90
반응형

HTML 테이블(Table)

테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다.

HTML에서는 <table>태그를 사용하여 이러한 테이블을 작성할 수 있습니다.

<table>태그는 다음과 같은 태그들로 구성됩니다.

1. <tr>태그는 테이블에서 열을 구분해 줍니다.

2. <th>태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.

3. <td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다.

예제

<table style="width:100%">

    <tr style="background-color:lightgrey">

        <th>참치</th>

        <th>고래</th>      

    </tr>

    <tr>

        <td>상어</td>

        <td>문어</td>

    </tr>

    <tr>

        <td>오징어</td>

        <td>고등어</td>

    </tr>

</table>

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다.

border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다.

예제

<style>

    table, th, td { border: 1px solid black }

</style>

위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <table>태그와 <th>태그, <td>태그가 모두 자신만의 테두리를 가지고 있기 때문입니다.

위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 합니다.

border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있습니다.

예제

<style>

    table, th, td { border: 1px solid black; border-collapse: collapse }

</style>

 

테이블의 열 합치기

colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있습니다.

예제

<table style="width:100%">

    <tr>

        <td>참치</td>

        <td colspan="2">고래</td>        

    </tr>

    <tr>

        <td>상어</td>

        <td>문어</td>        

        <td>꽁치</td>

    </tr>

</table>

 

테이블의 행 합치기

rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있습니다.

예제

<table style="width:100%">

    <tr>

        <td rowspan="2">상어</td>

        <td>문어</td>        

        <td>꽁치</td>

    </tr>

    <tr>

        <td>고등어</td>        

        <td>돌고래</td>

    </tr>

</table>

 

테이블의 열과 행 합치기

colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있습니다.

예제

<table style="width:100%">

    <tr>

        <td colspan="6">1</td>

    </tr>

    <tr>

        <td colspan="6">2</td>

    </tr>

    <tr>

        <td rowspan="3">3</td>

        <td rowspan="3">4</td>

        <td colspan="2">5</td>

        <td>6</td>

        <td>7</td>

    </tr>

    <tr>

        <td colspan="3">8</td>

        <td>9</td>

    </tr>

    <tr>

        <td colspan="4">10</td>

    </tr>

</table>

 

테이블의 캡션(caption) 설정

<caption>태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있습니다.

예제

<table style="width:100%">

    <caption>해양 생물</caption>

    <tr>

        <td>참치</td>

        <td>고래</td>

        <td>날치</td>    

    </tr>

</table>

https://www.tcpschool.com/html/html_basic_tables

 

test8.html
0.00MB

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>탐라국 입춘굿</h1>
  <p>탐라국 <sup>1</sup>입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 <strong><em>제주도의 문화축제 중에서 유일하게</em></strong> 전통시대부터 존재했던 축제이다.</p>
  제주에서 입춘은<sub>2</sub> 새철 드는 날.
  <br>신구간이 끝나 하늘의 <strong><u>1만8000</u></strong>신이 지상으로 내려와 새해 일들을 시작하는 때다.
  <p>자세한 정보 보기</p>
 
  <h2>일정</h2>
  <ol type="1"> <!--순서목록-->
    <li>입춘맞이 : 1/27(월) ~ 1/31(금) </li>
    <li>낭쉐코사 : 2/1(토)</li>
    <li>거리굿 : 2/2(일)</li>
    <li>열림굿 : 2/3(일)</li>
    <li>입춘굿 : 2/4(일)</li>
  </ol>

  <h2>먹거리</h2>
  <table border="1" >
    <tr>
    <th>입춘 천냥 국수</th>
    <th>8,000</th>
    <th>11:00 ~ 16:00</th>
    <th>목관아 주차장</th>
    </tr>
   
    <tr>
    <th>제주 향토 음식</th>
    <th rowspan="2" >10,000</th>
    <th>10:30 ~ 17:00</th>
    <th rowspan="3">관덕정 마당</th>
    </tr>

    <tr>
      <th>입춘 주전부리</th>
      <!--<th></th>-->
      <th>10:30 ~ 17:00</th>
      <!--<th></th>-->
      </tr>
     
    <tr>
      <th>차 나눔</th>
      <th>23,000</th>
      <th>10:30 ~ 17:00</th>
      </tr>
     
    <tr>
      <th>합계</th>
      <th colspan="2">41,000</th>
      <!--<th></th>-->
      <th style = "color:blue;">예상금액</th>
      </tr>

  </table>
  </body>
  </html>
728x90
반응형

'HTML' 카테고리의 다른 글

HTML(iframe)_2024-07-03  (2) 2024.07.03
HTML(블록과 인라인)_2024-07-03  (2) 2024.07.03
HTML(연습문제)_2024-07-03  (0) 2024.07.03
HTML(이미지)_2024-07-02  (0) 2024.07.02
HTML(VS Code 확장 프로그램)_2024-07-01  (0) 2024.07.01

관련글

티스토리툴바