📚표 만들기

표는 기본적으로 <table></table> 태그를 가장 바깥에 두고, 다른 태그들이 내부를 이룬다. 표를 만드는데 사용되는 태그들은 아래와 같다.

📝표를 만드는데 사용되는 태그들

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

여기서 주의할 점은 caption 태그 사용 시, 반드시 table 첫 번째에 적어주어야 한다는 것이다.

👉예시 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>신체 검사</title>
    </head>
    <body>
        <h3>신체 검사</h3>
        <hr>
        <table border="1">
            <caption>학생 신체 검사 표</caption>
            <thead>
                <tr>
                  <th>이름</th>
                  <th>키</th>
                  <th>체중</th>
                  <th>시력</th>
              </tr>
            </thead>
            <tfoot>
                <tr>
                  <th>평균</th>
                  <th>181</th>
                  <th>77</th>
                  <th>1.3</th>
              </tr>
            </tfoot>
            <tbody>
                <tr>
                  <td>XXX</td>
                  <td>179</td>
                  <td>67</td>
                  <td>1.0</td>
              </tr>
                <tr>
                  <td>YYY</td>
                  <td>177</td>
                  <td>77</td>
                  <td>2.0</td>
              </tr>
                <tr>
                  <td>ZZZ</td>
                  <td>189</td>
                  <td>87</td>
                  <td>1.2</td>
              </tr>
            </tbody>
        </table>
    </body>
</html>

위에서도 볼 수 있듯이 thead와 tfoot에 들어가는 각 셀은 th 태그로, tbody에는 td 태그로 각 셀을 작성해야 한다. 또한, 각 셀들을 tr 태그로 묶어 하나의 열로 작성한다.

table 태그 뒤에 오는 border 속성은 표의 경계선의 너비를 지정해주는 속성으로 px 단위로 지정된다. 디폴트 값은 0으로 경계선이 나타나지 않는다.

또한 th 태그나 td 태그에는 텍스트 말고도 img 태그를 이용해 이미지도 삽입할 수 있다.

📝표 셀 병합

워드나 엑셀에서 셀을 병합하는 것처럼 html에서도 colspan과 rowspan 속성을 이용해 셀을 병합할 수 있다.

colspan은 가로로 이웃한 셀을, rowspan은 세로로 이웃한 셀을 병합할 때 사용되며, th 태그나 td 태그의 속성으로 사용한다.

<td rowspan="2">셀에 들어가는 내용<td>
<td colspan="3">셀에 들어가는 내용<td>

위의 코드는 각각 세로로 2개의 셀을 병합, 가로로 3개의 셀을 병합한다는 뜻이다.

👉코드 예시

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>시공의 폭풍...?</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <td colspan="2"><img src="media\logo.png"></td>
                <td rowspan="2"><img src="media\logo2.png"></td>
            </tr>
            <tr>
                <td rowspan="2"><img src="media\logo2.png"></td>
                <td>학번</td>
            </tr>
            <tr>
                <td colspan="2"><img src="media\logo.png"></td>
            </tr>
        </table>
        <hr>
        <table border="1">
            <tr>
                <td rowspan="2"><img src="media\logo2.png"></td>
                <td colspan="2"><img src="media\logo.png"></td>
            </tr>
            <tr>
                <td>이름</td>
                <td rowspan="2"><img src="media\logo2.png"></td>
            </tr>
            <tr>
                <td colspan="2"><img src="media\logo.png"></td>
            </tr>
        </table>
    </body>
</html>

위의 코드를 실행하면 아래와 같은 결과가 나온다.

Author And Source

이 문제에 관하여(HTML [표 만들기]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pexe99/HTML-표-만들기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)