[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 목록만들기, 표 만들기"

04-3 목록만들기, 표 만들기

▶︎ 목록만들기

<ol type="a">
    <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
    <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
  </ol>
  <h4>드레싱 준비</h4>
  <ol type="a" start="3">
    <li>드레싱 재료를 믹서에 갈아줍니다.</li>
  </ol>
  <h4>샐러드 완성</h4>
  <ol type="a" start="4">
    <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ol>

 

 

<ol></ol> 순서 있는 목록

<ul>/<ul> 순서 없는 목록

 

---

<dl>
    <dt>선물용 3kg</dt>
    <dd>소과 13~16과</dd>
    <dd>중과 10~12과</dd>
  </dl>
  <dl>
    <dt>선물용 5kg</dt>
    <dd>중과 15~19과</dd>
  </dl>

<dl></dl> 설명목록

<dt></dt> 설명이름

<dd></dd> 설명부분

 

---

 

▶︎ 표 만들기

<table>
    <caption>선물용과 가정용 상품 구성</caption>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</t>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>

<table></table> 표만들기

<caption></caption> 표 제목

<tr></tr> 행

<td></td> 열

<thead></thead> 표 제목

<tbody></tbody> 표 본문

<tfoot></tfoot> 요약

<td rowspan=”합칠 셀의 개수”>셀의 내용</td> 행 합치기

<td colspan=”합칠 셀의 개수”>셀의 내용</td> 열 합치기

 

 

---

 

 

출처

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB