Html_table

테이블 태그 사용해보기!

-th 태그 : 테이블의 제목 칸을 의미 (bold 체)
-td 태그 : 테이블 데이터 셀 (Table Data)
-tr 태그 : 테이블 행 (Table Row)

My first table

1	2	3
4	5	6
7	8	9

<table border="1" width="150" height="150" bgcolor="skyblue"> 
        <caption>
            My first table
        </caption>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

cellspacing, cellpadding

• cellspacing: border 사이의 간격(여백)
• cellpadding: cell(td요소)의 내부 간격(여백)

메뉴판

메뉴	가격	비교
국물 떡볶이	5000원	2인 이상 주문 가능
참치김밥	4000원	x

<table border="1" cellpadding="15" cellspacing="15" align="center">
  <caption>메뉴판</caption>
  <tr> 
    <th>메뉴</th>
    <th>가격</th>
    <th>비교</th>
  </tr>
  <tr>
    <th>국물 떡볶이</th>
    <th>5000원</th>
    <th>2인 이상 주문 가능</th>
  </tr>
  <tr>
    <th>참치김밥</th>
    <th>4000원</th>
    <th>x</th>
  </tr>
</table>
</br>

rowspan, colspan

• rowspan: 해당 칸이 점유하는 행의 수 지정
ex) 2개의 row를 합치겠다
< td rowspan="2" >4000원< /td >
• colspan: 해당 칸이 점유하는 열의 수 지정
ex) 3개의 column을 합치겠다
< td colspan="3" > 순대 (품절)< /td >

New 메뉴판

메뉴	가격	비교
국물 떡볶이	5000원	2인 이상 주문 가능
참치김밥	4000원	x
치즈김밥	치즈 추가 500원
순대 (품절)

<table border="1"  cellspacing="" align="center">
        <caption>New 메뉴판</caption>
        <tr>
    
            <th>메뉴</th>
            <th>가격</th>
            <th>비교</th>
        </tr>
        <tr>
            <td>국물 떡볶이</td>
            <td>5000원</td>
            <td>2인 이상 주문 가능</td>
        </tr>
        <tr>
            <td>참치김밥</td>
          
            <td rowspan="2">4000원</td>
            <td>x</td>
        </tr>
        <tr>
            <td>치즈김밥</td>
       
            <td>치즈 추가 500원</td>
        </tr>
        <tr>
          
            <td colspan="3">순대 (품절)</td>
        </tr>
    </table>