본문 바로가기
카테고리 없음

테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

by nono22 2024. 1. 18.

테이블(Table) 사용법 총정리

1. 테이블 만들기

마크다운에서 테이블을 만들기 위해서는 파이프(|)를 사용하여 셀을 구분하고, 하이픈(-)을 사용하여 헤더 행과 데이터 행을 구분해야 합니다.

| 헤더1 | 헤더2 |
|-------|-------|
| 데이터1 | 데이터2 |
| 데이터3 | 데이터4 |

위와 같은 형태로 작성하여 테이블을 만들 수 있습니다.

2. 테두리 설정

테이블에 테두리를 추가하려면 파이프(|)와 하이픈(-)을 사용하여 테이블 행을 작성한 후, 콜론(:)을 사용하여 정렬 설정을 할 수 있습니다.

  • 좌측 정렬: :---
  • 가운데 정렬: :---:
  • 우측 정렬: ---:

예를 들어, 헤더 행을 가운데 정렬로 설정한 테이블은 다음과 같이 작성할 수 있습니다.

|     헤더1    |    헤더2   |
|:-----------:|:---------:|
|   데이터1   |    데이터2   |
|   데이터3   |    데이터4   |

3. 테이블 병합

마크다운에서 테이블의 셀을 병합하려면 파이프(|)를 생략하고 연속된 파이프를 사용하면 됩니다.

| 헤더1 | 헤더2 |
|-------|-------|
| 데이터1 | 데이터2 |
| 데이터3 | 데이터4 |
| 데이터5 || 데이터6 |

위와 같이 마지막 행에서 헤더1과 헤더2를 병합하여 하나의 셀로 만들 수 있습니다.

4. 테이블 정렬

테이블의 열을 정렬하려면 헤더 행의 하이픈(-) 아래에 파이프(|)와 빈칸을 사용하여 정렬 기준을 설정합니다.

| 헤더1 | 헤더2 |
|:-------|---------:|
| 데이터1 | 데이터2 |
| 데이터3 | 데이터4 |

위와 같이 첫 번째 열은 좌측 정렬, 두 번째 열은 우측 정렬로 설정할 수 있습니다.

5. 테이블 배경색

테이블 셀에 배경색을 추가하려면 HTML 태그를 사용해야 합니다. <table> 태그에 style 속성을 사용하여 테이블의 스타일을 지정할 수 있습니다.

<table>
    <tr>
        <th style="background-color:lightblue">헤더1</th>
        <th style="background-color:lightblue">헤더2</th>
    </tr>
    <tr>
        <td style="background-color:lightgreen">데이터1</td>
        <td style="background-color:lightgreen">데이터2</td>
    </tr>
    <tr>
        <td style="background-color:lightyellow">데이터3</td>
        <td style="background-color:lightyellow">데이터4</td>
    </tr>
</table>

위와 같이 <th> 태그에 background-color 속성을 사용하여 헤더 셀의 배경색을 지정할 수 있고, <td> 태그에 같은 속성을 사용하여 데이터 셀의 배경색을 지정할 수 있습니다.

테이블을 마크다운 형식으로 작성하는 방법에 대해 알아보았습니다. 필요에 따라서 테이블의 테두리, 병합, 정렬, 배경색을 설정하여 보다 다양한 테이블을 만들 수 있습니다.

댓글