EverGiver

<table> 태그 본문

Front-End (웹)/HTML

<table> 태그

친절한개발초보자 2021. 9. 7. 13:55
728x90
<table>  태그

 

표를 만들어주는 태그

  • <table> 태그
    : 표를 작성하기 전 기본적으로 작성해주는 태그
      (ul, main, form 태그들처럼 그냥 작성해주는 역할)
  • <caption> 태그
    : 표에 제목을 붙이는 태그
    - <table> 태그 바로 아랫줄에 사용한다.
  • <tr> 태그
    : 행을 열어주는 태그
      (border 속성을 넣어줘도 적용되지 않는다)
  • <td> 태그
    : 행 안에서 열 역할을 하는 태그
      (그냥 사용하면 겉으로 보기에 단순한 글자와 차이가 없기 때문에 td한테 border 속성을 꼭 넣어서 형태를 잡아주는 걸 추천한다)
  • <th> 태그
    : 표의 부제목
      - 특징
        ⅰ) 표의 제목 행에 셀을 만들 때 태그 대신 사용한다.
        ⅱ) 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열된다.

    ★ table 태그의 작성한 태그들은 단 하나의 태그 종류한테 width값을 넣어줘도 다른 태그들도 동시에 적용된다.
        (예외도 존재한다 / height 값은 적용 x) 
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>table 태그#1</title>
    <style>
        *{margin:0;padding:0}
        td{border:2px solid black;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
    </table>
</body>
</html>​
  • colspan 속성
    : 가로 열(열)을 병합해주는 기능으로 입력한 값만큼 병합이 이루어진다.
      <td colspan="값">
      - 값을 적을 때 해당 table 태그에 작성한 td의 최대 개수만큼만 적을 수 있다. 값을 초과해서 적어줘도 적용 안된다.
      - <td> 태그나 <th> 태그에서 이루어진다.
  • rowspan
    : 세로 열(행)을 병합해주는 기능
      - 값을 적어줄 때 자기 자신도 값에 포함해서 계산해야 한다.
      - 태그나 태그에서 이루어진다.
        ★ 병합해주고 싶은 칸의 개수보다 +1 만큼 작성해주면 된다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>table태그 #2</title>
    <style>
        *{margin:0;padding:0;}
        td{border:2px solid black;}
        
        th{border:2px solid black;width:200px;}
    </style>
</head>
<body>
    <table>
        <tr>
            <th>서브제목1</th>
            <th>서브제목2</th>
            <th>서브제목3</th>
        </tr>
        
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        
        <tr>
            <td colspan="8">2행 1열</td>
        </tr>
        
        <tr>
            <td>3행 1열</td>
            <td>3행 2열</td>
            <td>3행 3열</td>
            <td>3행 4열</td>
            <td>3행 5열</td>
        </tr>
    </table>
</body>
</html>​

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>table #3</title>
    <style>
        *{margin:0;padding:0;}
        td{border:3px solid black;width:100px;}
        caption{border:3px solid black;}
    </style>
</head>
<body>
    <table>
        <caption>메인 타이틀</caption>
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        
        <tr>
            <td rowspan="5">2행 1열</td>
        </tr>
        
        <tr>
            <td>3행 1열</td>
            <td>3행 2열</td>
            <td>3행 3열</td>
        </tr>
        
        <tr>
            <td>4행 1열</td>
            <td>4행 2열</td>
            <td>4행 3열</td>
        </tr>
        
        <tr>
            <td>5행 1열</td>
            <td>5행 2열</td>
            <td>5행 3열</td>
        </tr>
        
        <tr>
            <td>6행 1열</td>
            <td>6행 2열</td>
            <td>6행 3열</td>
        </tr>
    </table>
</body>
</html>​
  • <thead>, <tbody>, <tfoot> 태그
    ⅰ) <thead> 태그
         : 표 안에서 header 부분처럼 상단 역할을 담당하는 태그
         - 표의 제목, 서브 제목 등이 들어간다.
    ⅱ) <tbody> 태그
         : 표에서 본문 부분을 담당하는 태그
         - 표의 본문 내용이 들어간다.
    ⅲ) <tfoot> 태그
         : 표에서 하단부를 담당하는 태그
         - 시맨틱 태그의 footer와 비슷하다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>table #4</title>
    <style>
        *{margin:0;padding:0}
        td{border:3px solid black;}
        
        thead{width:300px;height:60px;background-color:red;}
    </style>
</head>
<body>
    <table>
        <thead>
            <td>번호</td>
            <td>제목</td>
            <td>날짜</td>
        </thead>
        
        <tbody>
            <td>001</td>
            <td>청년학당</td>
            <td>2020-07-07</td>
        </tbody>
        
        <tfoot>
            <td>250</td>
            <td>10개의 게시물</td>
            <td>2020-07</td>
        </tfoot>
    </table>
</body>
</html>​
  • <col>, <colgroup> 태그
    : 특정 열에 배경색을 넣거나 너비를 바꾸기 위한 방법
    - 반드시 <caption> 태그 다음에 사용한다.
    - <col> 태그 사용 시, <colgroup> 태그 안에 표 전체 열의 개수만큼 <col> 태그를 사용한다.
    <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col style="width:150px">
      <col style="width:150px">
    </colgroup>
    <thead>
...​

 

표 스타일

 

  • 표 제목의 위치를 정해 주는 caption-side 속성
    caption-side: top ¦ bottom​

    종류 설명
    top 캡션을 표 윗부분에 표시 (기본값)
    bottom 캡션을 표 아랫부분에 표시
  • 표에 테두리를 그려 주는 border 속성
    - 표 테두리는 border 속성을 사용하여 표 바깥 테두리와 셀 테두리를 각각 지정한다.
  • 셀 사이의 여백을 지정하는 border-spacing 속성
    - 표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백이 조금 생긴다.
    - border-spacing 속성을 사용하면 셀과 셀 사이의 여백을 조절할 수 있다.
    - 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1개만 지정해도 된다.
    border-spacing: 수평거리 수직거리​
  • 표와 셀 테두리를 합쳐 주는 border-collapse 속성
    - border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표신 된다. 이때 두 줄로 그냥 둘 것인지 아니면 하나로 합쳐서 하나로 표시할 것인지 결정하는 것이 border-collapse 속성이다.
    - <table> 태그에 적용되는 스타일에만 지정하면 된다.
    종류 설명
    collapse 표와 셀의 테두리를 합쳐 하나로 표시
    separate 표와 셀의 테두리를 따로 표시 (기본값)
    cf) empty-cells:hide
        : 테이블 태그의 경우 td의 내용이 비어있어도 표가 온전히 작성은 된다. 근데 해당 css속성을 사용해주면 내용이 비어있는 표가 공간은 보이지 않게 처리가 된다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>table #5</title>
    <style>
        *{margin:0;padding:0}
        td{border:2px dashed black;
            line-height:100px;text-align:center;
            width:200px;height:100px;}
        
        /*table{empty-cells:hide;}*/
        
        table{border-collapse:collapse;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td>영화제목1</td>
            <td>영화제목2</td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td>영화제목3</td>
            <td>영화제목4</td>
        </tr>
    </table>
</body>
</html>​


728x90
저작자표시

'Front-End (웹) > HTML' 카테고리의 다른 글

지도 사용법 (카카오 지도)  (0) 2021.09.04
지도 사용법 (네이버 지도)  (0) 2021.09.02
구글 개발자 도구  (0) 2021.08.29
외부 폰트  (0) 2021.08.27
<dfn>, <time>, <wbr> 태그  (0) 2021.08.24
'Front-End (웹)/HTML' Related Articles more
Comments