[HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬)

 

HTML과 CSS를 이용하여 

테이블 안의 글자를 정렬하는 방법을 정리하였습니다.

1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬)
2. 글자 위, 아래, 중간 정렬하기 (세로 정렬)
3. 정리 (가로 세로 모두 가운데 정렬하기)

 

 

1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬)

테이블 안의 글자의 가로 방향 정렬은

CSS의 'text-align' 속성을 사용하고, 

속성값으로 'left', 'right', 'center'가 올수 있습니다.

 

 기본 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}

 

text-align 설정이 없으면 기본적으로 <th>는 가운데 정렬, <td>는 왼쪽 정렬됩니다.

 

 

 가운데 정렬 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  text-align: center;
}

 

th, td 태그에 'text-align; center' 속성을 추가하였습니다.

 

 

 왼쪽 정렬 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  text-align: left;
}

 

th, td 태그에 'text-align; left' 속성을 추가하였습니다.

 

 

 오른쪽 정렬 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  text-align: right;
}

 

th, td 태그에 'text-align; right' 속성을 추가하였습니다.

 

 

 

2. 글자 위, 아래, 중간 정렬하기 (세로 정렬)

글자를 상하로 세로 정렬할 때는 'vertical-align' 속성을 사용합니다.

테이블에서 글자의 위치를 지정하기 위해 'top', 'middle', 'bottom' 값을 사용할 수 있습니다.

 

 기본 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}

 

 

vertical-align 속성을 지정하지 않으면 기본적으로 가운데(세로) 정렬됩니다.

 

 

 위로 정렬 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  vertical-align : top;
}

 

 

th, td 태그에 'vertical-align; top' 속성을 추가하였습니다.

 

 

 아래로 정렬 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  vertical-align : bottom;
}

 

th, td 태그에 'vertical-align; bottom' 속성을 추가하였습니다.

 

 

 중간 정렬 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  vertical-align : middle;
}

 

th, td 태그에 'vertical-align; middle' 속성을 추가하였습니다.

 

 

 

3. 정리

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
td, th {
  text-align : center;
  vertical-align : middle;
}

 

테이블안의 글자를 가로, 세로 모두 중앙 정렬하는 코드입니다.

td, th 태그에 text-align, vertical-align 속성을 정의하였습니다.