Notice
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
관리 메뉴

Jade_o.o

[html] 09 - table태그 실습 - 카페 음료 문서 및 이미지 출력 본문

HTML

[html] 09 - table태그 실습 - 카페 음료 문서 및 이미지 출력

by jade 2024. 1. 10. 18:50

table 태그 실습 - 카페 음료 문서 및 이미지 출력

html공부를 복습하며 카페 음료 문서 작성을 구현해 보았다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="20">
        <tr>
            <th>구분</th>
            <th>음료</th>
            <th>가격</th>
            <th>이미지</th>
        </tr>
        <tr>
            <td rowspan="2">커피류</td>
            <td>아메리카노</td>
            <td>4200원</td>
            <td><a href="https://www.starbucks.co.kr/menu/drink_view.do?product_cd=110563"><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[110563]_20210426095937947.jpg" width="100"></a></td>
        </tr>
        <tr>
            <td>돌체라떼</td>
            <td>4800원</td>
            <td><a href="https://www.starbucks.co.kr/menu/drink_view.do?product_cd=128692"><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[128692]_20210426091933798.jpg" width="100"></a></td>
        </tr>
        <tr>
            <td rowspan="2">주스류</td>
            <td>카라멜 프라푸치노</td>
            <td rowspan="2">5000원</td>
            <td><a href="https://www.starbucks.co.kr/menu/drink_view.do?product_cd=168016"><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[168016]_20210415154152277.jpg" width="100"></a></td>
        </tr>
        <tr>
            <td>녹차 프라푸치노</td>
            <td><a href="https://www.starbucks.co.kr/menu/drink_view.do?product_cd=9200000002502"><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[9200000002502]_20210426100408183.jpg" width="100"></a></td>
        </tr>
    </table>
</body>
</html>
구분 음료 가격 이미지
커피류 아메리카노 4200원
돌체라떼 4800원
주스류 카라멜 프라푸치노 5000원
녹차 프라푸치노

=> html 코드 실행 시 결과창

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

[html] 11 - html 공부 정리2_tag 종류  (0) 2024.01.11
[html] 10 - html 공부 정리1_html 구조, html 기본문법  (1) 2024.01.11
[html] 08 - table태그 rowspan,colspan 실습-도형 만들기  (0) 2024.01.10
[html] 07 - form문 관련 태그 사용하기 실습-설문조사 작성  (0) 2024.01.10
[html] 06 - 기본 태그 사용하기 실습-카페 음료 문서 작성  (0) 2024.01.10
'HTML' Related Articles more