생각 작업실 The atelier of thinking

8. <HTML> <Table> 태그 본문

웹(Web) 이야기

8. <HTML> <Table> 태그

knowledge-seeker 2024. 1. 31. 15:45

지난회차에 <img> 태그를 이용하여 그림을 웹페이지에 삽입하는 것을 알아봤습니다.

이번 회차에는 웹페이지의 구성을 깔끔하게 정리할 수 있는 <table> 태그에 대해 알아보겠습니다. table, 즉 표를 만드는 태그입니다.

표 만드는데 사용되는 태그들 아래와 같습니다.

 

<table> : 표 전체를 담는 컨테이너
<caption> : 표 제목
<thead> : 헤딩 셀 그룹
<tfoot> : 바닥 셀 그룹
<tbody> : 데이터 셀 그룹
<tr> : 행. 여러 <td>, <th> 포함
<th> : 열 제목(헤딩) 셀
<td> : 데이터 셀

 

기본적인 사용법은 아래와 같습니다.

 

<!DOCTYPE html>
<html>
<head>
 <title> 피자 메뉴 </title>
</head>
<body>
    <table border="1">
        <caption>피자 메뉴</caption>
        <thead> 
            <th>피자</th> <th>사이드디쉬</th> <th> 음료</th> 
        </thead>
        <tbody> 
            <tr>
                <td>클래식피자</td> <td>파스타</td> <td> 콜라 </td>
            </tr> 
            <tr>
                <td>슈프림피자</td> <td>샐러드</td> <td> 사이다 </td>
            </tr> 
            <tr>
                <td>치즈피자</td> <td>치즈볼</td> <td> 쥬스 </td>
            </tr> 
        </tbody>
        <tfoot>
             <td colspan="3"> 메뉴를 선택해 주세요 </td> 
        </tfoot>
    </table>

</body>
</html>

 

<tr> 태그로 감싼 각 줄의 <td> 태그 셀의 숫자는 같게 해주어야 합니다.
셀을 합치는 속성은 열을 합칠 때는 colspan, 행을 합칠 때는 rowspan을 사용합니다.


<table> 태그를 이용하면 그림을 정렬하여 나타내기 편리합니다.
<td> 태그 안에 <img> 태그를 삽입하여 이미지를 불러들일 수 있습니다.

 

<table border="1">
        <caption>피자 메뉴</caption>
        <thead> 
            <th>피자</th> <th>사이드디쉬</th> <th> 음료</th> 
        </thead>
        <tbody> 
            <tr>
                <td>클래식피자</td> 
                <td>파스타</td> 
                <td> 콜라 </td>
            </tr>
            <tr>
                <td><img src="images/클래식피자.PNG" alt=""></td>
                <td><img src="images/파스타.PNG" alt=""></td> 
                <td> <img src="images/콜라.PNG" alt=""> </td>
            </tr> 
            <tr>
                <td>슈프림피자</td> 
                <td>샐러드</td> 
                <td> 사이다 </td>
            </tr>
            <tr>
                <td><img src="images/슈프림피자.PNG" alt=""></td>
                <td><img src="images/샐러드.PNG" alt=""></td> 
                <td> <img src="images/사이다.PNG" alt=""> </td>
            </tr>
            <tr>
                <td>치즈피자</td> 
                <td>치즈볼</td> 
                <td> 쥬스 </td>
            </tr> 
            <tr>
                <td><img src="images/치즈피자.PNG" alt=""></td> 
                <td><img src="images/치즈볼.PNG" alt=""></td> 
                <td> <img src="images/쥬스.jpg" alt=""> </td>
            </tr>
        </tbody>
        <tfoot>
             <td colspan="3"> 메뉴를 선택해 주세요 </td> 
        </tfoot>
    </table>

 

이 때, 이미지 파일 크기를 같은 크기로 맞추어 놓으면 좋습니다. 혹은 width, height를 이용하여 크기를 같게 해놓으면 보다 보기 좋은 이미지를 보여줄 수 있습니다.

'웹(Web) 이야기' 카테고리의 다른 글

10. <CSS> 란 ?  (0) 2024.02.15
9. <HTML> 하이퍼링크 태그 - <a>  (1) 2024.02.11
7. <HTML> 이미지 태그 - <image>  (1) 2024.01.30
6.<HTML> 텍스트 표현 태그-<b>,<u>,<i>  (1) 2024.01.29
5. <HTML> 리스트 태그 <ol>, <ul>, <li>  (0) 2024.01.27
'웹(Web) 이야기' Related Articles more