HTML입문

HTML_표컨텐츠태그(table)_22.04.06(wed)

양빵빵 2022. 4. 7. 15:35

table 태그로 큰 박스 설정 후 tr 태그로 행 설정(5줄) th 태그로 열 설정(5칸)
기본 틀은 5행 5열로 설정 하였고 특이사항 밑에 있는 3개의 행을 정렬 하기 위해 <td rowspan="3"></td> 를 입력 하였다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        table {
            border-collapse: collapse;
        }

        td, th{
            border: 1px solid gray;
            text-align: center;
            padding: 7px;
        }
        th {
            background: lightgray;
        }
    </style>
</head>
<body>
   
    <table>
        <tr>
            <th colspan="5">인적사항</th>
        </tr>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>주소</th>
            <th>성별</th>
            <th>특이사항</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>서울시</td>
            <td>남성</td>
            <td rowspan="3">x</td>
        </tr>
        <tr>
            <td>박영희</td>
            <td>31</td>
            <td>경기도</td>
            <td>여성</td>
        </tr>
        <tr>
            <td>김철수</td>
            <td>41</td>
            <td>제주도</td>
            <td>남성</td>
        </tr>
    </table>



   
</body>
</html>
 
border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할지 정합니다.

 

  • separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
  • collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.
7행 3열 이 기본틀인 table을 만든 후 collspan 으로 열병합을 하여 위에 표를 만들었습니다.

 

  • separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
  • collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        table {
            border-collapse: collapse;
        }

        td, th{
            border: 1px solid black;
            text-align: center;
            padding: 7px;
        }
        th {
            background: orange;
        }
    </style>
</head>
<body>
   
 <table>
     <tr>
         <th colspan="3">공연요금</th>
   
     </tr>
     <tr>
         <th>구분</th>
         <td>S석</td>
         <td>VIP</td>
     </tr>
     <tr>
         <th>성인</th>
         <td>50,000원</td>
         <td>70,000원</td>
     </tr>
     <tr>
         <th>청소년</th>
         <td>40,000원</td>
         <td>60,000원</td>
     </tr>
     <tr>
         <th>소인</th>
         <td colspan="2">미취학 아동 일반 요금의 50%</td>
         
     </tr>
     <tr>
         <th rowspan="2">공연시간</th>
         <td>1회</td>
         <td>13:00시 - 15:00시</td>
     </tr>
     <tr>
         
         <td>2회</td>
         <td>17:00시 - 19:00시</td>
     </tr>
 </table>

</body>
</html>