HTML(table, 주석)

yo·2020년 4월 17일
0
post-custom-banner

<table 작성>

1) 기본코드 작성 <table> </table>
2)table 첫 열에 head를 작성.

<table>
  <thead>
  </thead>
</table>

3) head의 가로줄 추가하기(보통 표는 head에 1개의 가로줄)

<table>
  <thead>
   <tr>
   </tr>
  </thead>
</table>

4)head 각 칸에 내용 쓰기

<table>
  <thead>
   <tr>
    <th>첫번째 칸</th>
    <th>두번째 칸</th>
   </tr>
  </thead>
</table>

5)테이블에 내용 넣기. (table body)

<table>
  <thead>
   <tr>
    <th>첫번째 칸</th>
    <th>두번째 칸</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>내용</td>
    <td>내용2</td>
   </tr> 
   <tr>
    <td>내용3</td>
    <td>내용4</td>
   </tr> 
  </tbody>
</table>

예시>

        <table>
            <thead>
                <tr>
                    <th>Meal</th>
                    <th>Ingredients</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Steak</td>
                    <td>beef tender</td>
                    <td>100$<td>
                </tr>
                <tr>
                    <td>Onion Soupk</td>
                    <td>Fresh Onion</td>
                    <td>5$<td>
                </tr>
                
            </tbody>
        </table>

th-tabular head
td-tabular data

<주석처리 하는 법>

문법: <!-- 내용작성 -->

profile
Never stop asking why
post-custom-banner

0개의 댓글