HTML 목록과 테이블 태그

 

순서 없는 목록 만들기

 

<ul>, <li> 태그

순서가 필요하지 않는 목록을 만들 때는 ul 태그를 사용하고 각 항목으로 li 태그를 사용한다.

<ul>
    <li>일반 전화</li>
    <li>이메일</li>
    <li>휴대 전화</li>
</ul>

 

순서 있는 목록 만들기

 

<ol>, <li> 태그

항목을 나열하되 순서가 필요한 목록을 만들 때는 <ul> 태그 대신 <ol> 태그로 사용한다. 여러 속성들과 함께 사용하여 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있다. 

<!--
    속성 정보
    type : 목록의 숫자 표기 방법을 달리할 수 있다. (속성값 : 1(기본값), a, A, i, I) 
    start : 다른 번호부터 시작할 수 있다.
    reserved : 항목을 역순으로 표시한다.
-->
<ol reversed>
    <li>한라 수목원</li>
    <li>산방산</li>
    <li>광교산</li>
    <li>설악산</li>
    <li>해수욕장</li>
</ol>

<ol type="A" start="3">
    <li>한라 수목원</li>
    <li>산방산</li>
    <li>광교산</li>
    <li>설악산</li>
    <li>해수욕장</li>
</ol>

 

 

</li> 태그 생략과 목록 중첩

</li> 태그를 생략해도 <li> 태그가 다음에 오는 <li> 태그를 만나면 자동으로 그 전에 </li>태그가 있는 것처럼 인식한다.

<ol type="A" start="3">
    <li>한라 수목원
    <li>산방산
    <li>광교산
    <li>설악산
    <li>해수욕장
</ol>

 

설명 목록 만들기

 

<dl>, <dt>, <dd> 태그

<dl> 태그는 사전 구성처럼 제목과 설명이 한 쌍인 설명 목록을 만든다.

<dl> 태그는 목록을 만들고 <dt> 태그는 제목을 <dd> 태그는 설명을 표시한다.

<dl>
    <dt>학력 정보</dt>
    <dd>이름 : 홍길동</dd>
    <dd>연락처 : 010-2222-3333</dd>
    <dt>성적</dt>
    <dd>수학 : A</dd>
    <dd>과학 : A</dd>
    <dd>미술 : D</dd>
</dl>

 

 

표 만들기

 

* 행(row)은 가로줄, 열(column)은 세로줄을 뜻한다. 행과 열이 만나 이루는 영역을 셀(cell)이라고 부른다.

 

<table>, <tr>, <td>, <th> 태그로 기본적인 표 만들기

<tr> 은 행을 만드는 태그이며, <td> 는 열을 만드는 태그이다.

<th> 는 제목을 만드는 태그이다. th 태그는 해당 셀에 들어가는 내용을 셀의 중앙에 배치학 굵게 표시된다.

<table border="1">
    <tr>
        <th>제목 셀</th>
        <td>1행 2열</td>
        <td>1행 3열</td>
    </tr>
    <tr>
        <th>제목 셀</th>
        <td>2행 2열</td>
        <td>2행 2열</td>
    </tr>
</table>

 

 

속성 colspan 행 합치기

열을 하나로 합치려면 td 태그나 th 태그 안에서 colspan 속성을 사용해 몇 개의 셀을 가로로 합칠지 지정한다.

<table border="1">
    <colgroup>
        <col style="width:70px;">
        <col style="width:100px;">
        <col style="width:70px;">
        <col style="width:100px;">
    </colgroup>
    <tr>
        <th>이름</th>
        <td></td>
        <th>연락처</th>
        <td></td>
    </tr>
    <tr>
        <th>주소</th>
        <td colspan="3"></td>
    </tr>
</table>

 

 

속성 rowspan 열 합치기

열을 하나로 합치려면 td 태그나 th 태그 안에서 rowspan 속성을 사용해 몇 개의 셀을 세로로 합칠지 지정한다.

<table border="1">
    <colgroup>
        <col style="width:70px;">
    </colgroup>
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
    </tr>
    <tr>
        <td rowspan="2">2행 1열</td>
        <td>2행 2열</td>
        <td rowspan="2">2행 3열</td>
        <td>2행 4열</td>
    </tr>
    <tr>
        <td>3행 1열</td>
        <td>3행 2열</td>
    </tr>
</table>

 

 

<caption> 태그로 표에 제목 붙이기

제목이 위쪽 중앙에 표시된다.

<table border="1">
    <caption>
        <strong>테이블 제목</strong>
    </caption>
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
    </tr>
</table>

 

 

<figcaption> 태그로 표에 제목 붙이기

<figcation> 태그와 <figure> 태그로도 표에 제목을 붙일 수 있다.<figure> 태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력한다. <caption> 태그와 달리 제목이 중앙 위쪽에 표시되지 않는다.

표뿐만 아니라 제목을 붙이려고 하는 어떤 대상에서도 사용할 수 있다. 이미지, 동영상 등 모두 가능하다.

<figcaption> 위치에 따라 표의 위나 아래에 제목이 표시된다.

<figure>
    <figcaption>
        <b>표 테스트 입니다.</b>
    </figcaption>
    <table border="1">
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
            <td>1행 4열</td>
        </tr>
    </table>
    <!-- <figcaption>
        <b>표 테스트</b>
    </figcaption> -->
</figure>

 

 

* aria-describedby 속성

화면 낭독기에서 표를 읽어줄 때 도움이 되도록 표 설명을 별도의 문장으로 작성한 후 table 태그 안에 aria-describedy 속성을 추가해 연결하면 표를 이해하는데 도움을 준다.

<p id="summary">
    화면 낭독기에서 표를 읽어줄 때 도움을 줄 수 있습니다.  
</p>
<table border="1" aria-describedby="summary">
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
    </tr>
</table>

 

 

<thead>, <tbody>, <tfoot> 태그로 표 구조 정의하기

<thead>는 제목, <tbody>는 본문, <tfoot>는 요약으로 표의 구조를 나눌 수 있다. 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있도록 돕니다. 이렇게 구조를 정의하면 자바스크립트를 이용해 제목 부분(thead)과 요약 부분(tfoot)을 고정하고 본문(tbody)만 스크롤되도록 만들 수 있고 css를 통해 각각 다른 스타일을 적용할 수 있다.

<table border="1">
    <thead>
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
            <td>1행 4열</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
            <td>2행 4열</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>3행 1열</td>
            <td>3행 2열</td>
            <td>3행 3열</td>
            <td>3행 4열</td>
        </tr>
    </tfoot>
</table>

 

 

<col> , <colgroup> - 열끼리 묶어 스타일 지정하기

<tr>, <td> 태그 전에 사용해야 한다.

<col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용한다. 닫는 태그가 없다.

<colgroup> 태그로 여러 열을 묶을 수도 있다. 

<col> 태그에 span 속성을 사용해 여러 열을 묶을 수 있다.

<col> 태그의 개수와 표의 열의 개수가 같아야 한다.

<table border="1">
    <colgroup>
        <col>
        <col style="width: 40px;">
        <col span="2" style="background-color: aqua;">
    </colgroup>
    <tr>
        <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td>
    </tr>
</table>