11. table 만들기

안녕하세요 이번 포스팅에서는 HTML에서 Table을 만드는 방법에 대해서 알아보겠습니다. 

 

1. 스타일링을 위해서는 table 태그를 div 태그로 감싸자

<div> <!-- table 바깥에 여백 혹은 색상을 주기 위한 div태그를 작성합시다. --> 
	<table>
    </table>
</div>

이러면 나중에 기능 개발 혹은 스타일링을 위해서 div 태그에 id 혹은 class를 부여하고 쉽게 접근이 가능합니다. 

 

2. table 태그의 기본 골격 구조에 대해서 알아보자 

table 태그의 기본 골격 구조

<div>
            <table>
                <thead>
                    <tr> 
                        <th>바나나</th>
                        <th>사과</th>
                        <th>메론</th>
                    </tr>
                </thead>
                <tbody> 
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>

table = <thead> + <tbody>로 이뤄져 있습니다. 

 

▶ thead : table에서 제목 혹은 column의 feature를 나타내는 글을 쓰기 위해서 사용합니다.

☞ 가로 행 : <tr>,  세로 열 : <th> 로 표현합니다. (세로 열을 표현할 때 td도 가능하지만, thead에서는 th 사용 추천)

☞ <th> 특징 

    1. 가운데 정렬이 기본 값 

    2. 굵은 글씨로 작성됨

 

▶ tbody : feature에 해당하는 개수 혹은 값을 나타냅니다. 

☞ 가로 행 : <tr>, 세로 열 : <td> 로 표현합니다.  

☞ <td> 특징 

    1. 왼쪽 정렬이 기본

 

결과

☞ 우리가 알던 테이블(표)의 모습이 아니죠? 

스타일링을 통해서 표에 가깝게 만들어 보겠습니다. 

 

 

3. 스타일링을 통한 테이블 정상화 시키기

1. td,th(열 태그)에 경계선을 줘서 구분선을 만든다. 

td,th {
    border : 1px solid black;
}

2. td간 공백 혹은 마진이 없도록 table 태그에 스타일링 부여

경계선을 겹치게 하는 명령어

table {
    border-collapse: collapse;
/*    경계선 겹치게 border-collapse : collapse;*/
}

 

4. 테이블 내에서 글자 수직 정렬 [vertical-align : ] 

표 내에서 왼쪽, 중앙, 오른쪽 정렬을 하려면 text-align : 을 사용하면 됩니다. 

하지만 위 아래 즉, 수직 정렬을 하려면 어떻게 해야 할 까요? 

vertical-align을 사용합니다. 

어려운 개념이 아닙니다. 워드 혹은 한글에서 이미 익숙하게 사용하고 있는 개념입니다. 

td,th {
    vertical-align: top;
    /* 테이블 내에서 글씨를 top/middle/bottom 로 정렬 -> vertical-align :  */
}

위는 top, 중앙은 middle, 아래는 bottom으로 사용하면 됩니다. 

 

vertical-align 예제 

 

<적용 이전> 

<div> <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" width="32" height="32" > 나 좀 가운데로 배치시켜줘</div>

이미지와 글자를 바로 옆에 사용하게 되면 기본적으로 글씨는 이미지의 아래 쪽에 붙어서 정렬됩니다. 

이 때 글자를 가운데로 배치시키려면 <img> 태그의 style로 vertical-align : middle 로 설정 하면 됩니다. 

 

<적용 이후>

<div> <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" width="32" height="32" style='vertical-align: middle;'> 나 좀 가운데로 배치시켜줘</div>