HTML 에서 테이블을 쓰다가, 테이블의 제목은 가운데 정렬을 해주고 번호나 날짜는 가운데정렬을 하지만 제목이나 내용은 왼쪽 정렬로 출력하고 싶고.... 원하는 데로 테이블을 꾸미고 싶을 때가 있습니다.

이때 여러가지 방법으로 꾸며줄 수 있습니다.

이번 포스트에서는 표를 가운데 정렬하는 방법을 알아보려 합니다.


01. 표(table) 예제

표 예제를 살펴보면 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Table 정렬</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 1000px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>번호1</td>
          <td>제목1</td>
          <td>날짜1</td>
        </tr>
        <tr>
          <td>번호2</td>
          <td>제목2</td>
          <td>날짜2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>


위의 코드를 실행하면 크게 꾸며준 것이 없는 테이블을 볼 수 있습니다.


Table 정렬
번호 제목 날짜
번호1 제목1 날짜1
번호2 제목2 날짜2

이제 이 기본 소스에서 추가적인 작업을 수행하면서 어떻게 정렬을 바꾸고 수정할지 방법을 알아보겠습니다.





02. 표 가운데 정렬

CSS 수정하는 방법

아래의 소스는 표 예제 소스에서 CSS 부분을 수정한 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Table 정렬</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 1000px;
        height: 200px;
      }
      td {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>번호1</td>
          <td>제목1</td>
          <td>날짜1</td>
        </tr>
        <tr>
          <td>번호2</td>
          <td>제목2</td>
          <td>날짜2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>


td 태그에 text-align: center;를 추가해줌으로써 모든 td를 가운데정렬을 해주었습니다.

Table 정렬
번호 제목 날짜
번호1 제목1 날짜1
번호2 제목2 날짜2



<center>태그를 이용하는 방법

CSS 속성을 변경해주는 것보다 번거로운 점이 있지만 특정 td 태그만 가운데정렬을 간편하게 할 수 있습니다.

물론 CSS 속성을 보다 견고하게 세분화하여 적용해준다면 center를 사용하는 번거로움도 없어지겠지만, 저는 아래와 같은 방법을 사용하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Table 정렬</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 1000px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>번호1</td>
          <td><center>제목1</center></td>
          <td>날짜1</td>
        </tr>
        <tr>
          <td>번호2</td>
          <td><center>제목2</center></td>
          <td>날짜2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html



Table 정렬
번호 제목 날짜
번호1
제목1
 날짜1
번호2
제목2
 날짜2




저작자표시 비영리

+ Recent posts

티스토리툴바