기초) HTML4 Table tag 용어 정리 및 표현 방법

2020. 4. 17. 03:05

HTML4 기준이고

5 넘어오면서

변경 되거나 사라진 부분

있으니 주의 하자.

샘플 코드

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <table width="100%" border="1" summary="우리집에서 지난 이틀간 만든 요리에 대한 평가표 ">
        <caption>오늘은 내가 요리사</caption>               <!--caption은 테이블의 제목-->
          <colgroup>                                 <!--columngroup의 약자,즉, '열'의 그룹-->
              <col width="25%">                      <!--col은 나뉘어지는 열 수 만큼 *비율은 반드시 %로 표기 -->
              <col width="25%">
              <col width="25%">
              <col width="25%">
          </colgroup>

          <thead>             <!--thead/tfoot/tbody는 행의 그룹/ 코딩순서는 아래순으로 작성-->
              <tr>                               <!--tr은 table row/ 행을 뜻함 -->
                  <th>요리 만든 날</th>           <!--thead는 th(table header cell,제목셀)만 제공가능-->
                  <th>먹은사람</th>               <!--td(table data cell)는 내용셀-->
                  <th>지역</th>
                  <th>만족도</th>
              </tr>
          </thead>

          <tfoot>
            <tr>
                <th>합계</th>
                <td>6명</td>
                <td>아른헴</td>
                <td>상</td>
            </tr>
          </tfoot>

          <tbody>
            <tr>
              <th>2020년 4월 18일</th>
              <td>3명</td>
              <td>아른헴</td>
              <td>상</td>
            </tr>

            <tr>
              <th>2020년 4월 19일</th>
              <td>3명</td>
              <td>아른헴</td>
              <td>상</td>
            </tr>

          </tbody>
    </table>

<table> : 테이블 태그의 시작

*summary를 꼭 추가해야 한다

<caption> : 테이블의 제목

<colgroup> : (column) 열'의 그룹

<col> : 표에서 필요한 열 수만큼 작성,

비율은 반드시 %로 표기

<thead/tfoot/tbody> : '행'의 그룹

시각 장애인들을 배려해

코딩 순서는 위 순으로 하기,

실제 보이는 건 순서대로

*위 세 가지 요소가 필수 요소는 아님

상황에 따라 헤드나 풋이 없을 수 있음

<tr> : table row / 행

<th> : table header cell,

thead는 th만 사용 가능

<td> : table data cell, 내용셀

셀 병합

샘플 코드

 <table width="100%" border="1" summary="행열 합치는연습">
       <caption>행열을 합쳐보자</caption>
            <tr>
               <td colspan="2">1</td>

               <td rowspan="2">3</td>
               <td>4</td>
            </tr>
            <tr>
               <td>5</td>
               <td>6</td>
                
               <td>8</td>
            </tr>
            <tr>
               <td>9</td>
               <td colspan="3">10</td>

            </tr>

       </table>

  </body>
</html>

1️⃣ colspan: 가로 병합

좌 우측이 합쳐진다

2️⃣ rowspan: 세로 병합

위에서 밑으로

align="left, center, right"

테이블/ 내용을 어디에 정렬할지

bgcolor:

테이블의 배경 색

background:

테이블의 배경 색

border:

테이블 테두리의 두께

bordercolor:

테두리의 색상

cellspacing:

셀과 셀 사이의 간격

cellpadding:

셀 안과 내용의 여백

height:

높이,

픽셀로 지정 시 절댓값,

% 단위로 입력 시

브라우저 크기에 대한 상대 값

width:

가로 크기,

픽셀로 지정 시 절댓값,

% 단위로 입력 시

브라우저 크기에 대한 상대 값

연습)

달력 만들기 샘플 코드

<table bgcolor="#C49F96" width="800" height="220">
  <tr align="center">
     <td style="#EA3114">Sun</td>
     <td>Mon</td>
     <td>Tue</td>
     <td>Wed</td>
     <td>Thur</td>
     <td>Fri</td>
     <td>Sat</td>
</tr>

   <tr align="center">
       <td bgcolor="#1BC9EC" colspan="3"></td>

       <td>1</td>
       <td>2</td>
       <td>3</td>
       <td style="color:#FCF816">4</td>
   </tr>
   <tr align="center">
       <td style="color:#FCF816">5</td>
       <td>6</td>
       <td>7</td>
       <td>8</td>
       <td>9</td>
       <td>10</td>
       <td style="color:#FCF816">11</td>
   </tr>
   <tr align="center">
       <td style="color:#FCF816">12</td>
       <td>13</td>
       <td>14</td>
       <td>15</td>
       <td>16</td>
       <td>17</td>
       <td style="color:#FCF816">18</td>
   </tr>
   <tr align="center">
       <td style="color:#FCF816">19</td>
       <td>20</td>
       <td>21</td>
       <td>22</td>
       <td>23</td>
       <td>24</td>
       <td style="color:#FCF816">25</td>
   </tr>
   <tr align="center">
       <td style="color:#FCF816">26</td>
       <td>27</td>
       <td>28</td>
       <td>29</td>
       <td>30</td>
       <td>31</td>
       <td bgcolor="#1BC9EC"></td>
   </tr>
</table>

</body>
</html>

728x90

'프로그래밍 > HTML' 카테고리의 다른 글

검색 노출을 위한 <meta> 사용법 정리 (0)	2020.04.27
기초) HTML5 추가 요소(input/video 등) 정리 (0)	2020.04.20
기초) HTML5 figure/figcaption 요소 (0)	2020.04.20
기초) HTML5 table tag 바뀐 점 (0)	2020.04.20
기초) HTML4 form / input type 요소 정리 (0)	2020.04.20

타쿠대디

기초) HTML4 Table tag 용어 정리 및 표현 방법

'프로그래밍 > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바