My Study/서적 공부
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 목록만들기, 표 만들기"
handbefore
2024. 7. 20. 17:16
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
easyspub.co.kr