웹프로그래밍 HTML (7) 테이블 요소

📋오늘의 목표📋

HTML에서 테이블을 표현하는 방법에 대해서 알아보자.

테이블 요소

• <table> : 표를 나타내는 태그 (표)
• <tr> : 행을 나타내는 태그 (행)
• <th> : 제목 셀을 나타내는 태그 (데이터 셀)
• <td> : 셀을 나타내는 태그 (데이터 셀)

표는 가로로 그리기 때문에 한 행에 몇개의 열이 있는지를 기준으로 본다.

<1* 4 표의 경우>

<table>
<th>제목</th>
	<tr>
    	<td>첫번째 열</td>
        <td>두번째 열</td>
        <td>세번째 열</td>
        <td>네번째 열</td>
    </tr>
<table>

👉실행화면

표의 구조와 관련된 태그

• <caption>: 표의 제목을 나타내는 태그
• <thead>: 제목 행을 그룹화하는 태그
• <tfoot>: 바닥 행을 그룹화하는 태그 (<tbody>뒤에 위치)
• <tbody>: 본문 행을 그룹화하는 태그
  
  
  

표의 속성들

• align: 정렬을 지정한다. ( left, center, right )
• border: 테두리 선의 두께를 지정한다.
• bgcolor: 배경색을 지정한다. ( 색은 "red", "black" 처럼 기존의 정의되어있는 색을 사용할 수도 있으며 rgb형식의 #000000 으로도 색을 지정할 수 있다. )
• bordercolor: 테두리 선의 색을 지정한다. 색을 지정하는 방법은 bgcolor와 동일하다.
• cellspacing: 셀간의 간격을 지정한다.
• width: 가로길이를 지정한다. (상수값을 입력할 수도, % 단위로 입력할 수도 있다. %를 사용하였을 때는 웹브라우저 크기의 대한 %이다. )
• height: 세로길이를 지정한다.
• rawspan: 지정한 값만큼 행을 병합한다. (위아래로)
• colspan: 지정한 값만큼 열을 병합한다. (좌우로)
  
  

예제코드

<table border ="1" width="50%" height=200 
        bgcolor=#11a9c1 bordercolor="white" cellspacing="5">
     <tr align="center" bgcolor="white">
       <td rowspan="2">rawspan 사용</td>
       <td>김씨</td>
       <td>이씨</td>
       <td>박씨</td>
     </tr>

     <tr align="center" bgcolor="white">
       <td>100원</td>
       <td>200원</td>
       <td>400원</td>
     </tr>
     <tr align="center" bgcolor="white">
       <td colspan="4">
         colspan 사용
       </td>
     </tr>
   </table>

👉결과 화면

🏅오늘의 느낀 점🏅

엄청 복잡하다.
그래서 코드를 짜주는 사이트를 들고왔지

사이트 👉 https://www.tablesgenerator.com/html_tables