HTML 에서 테이블을 쓰다가, 테이블의 제목은 가운데 정렬을 해주고 번호나 날짜는 가운데정렬을 하지만 제목이나 내용은 왼쪽 정렬로 출력하고 싶고.... 원하는 데로 테이블을 꾸미고 싶을 때가 있습니다.
이때 여러가지 방법으로 꾸며줄 수 있습니다.
이번 포스트에서는 표를 가운데 정렬하는 방법을 알아보려 합니다.
01. 표(table) 예제
표 예제를 살펴보면 다음과 같습니다.
<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>
위의 코드를 실행하면 크게 꾸며준 것이 없는 테이블을 볼 수 있습니다.
| 번호 | 제목 | 날짜 |
|---|---|---|
| 번호1 | 제목1 | 날짜1 |
| 번호2 | 제목2 | 날짜2 |
이제 이 기본 소스에서 추가적인 작업을 수행하면서 어떻게 정렬을 바꾸고 수정할지 방법을 알아보겠습니다.
02. 표 가운데 정렬
CSS 수정하는 방법
아래의 소스는 표 예제 소스에서 CSS 부분을 수정한 것입니다.
<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를 가운데정렬을 해주었습니다.
| 번호 | 제목 | 날짜 |
|---|---|---|
| 번호1 | 제목1 | 날짜1 |
| 번호2 | 제목2 | 날짜2 |
<center>태그를 이용하는 방법
CSS 속성을 변경해주는 것보다 번거로운 점이 있지만 특정 td 태그만 가운데정렬을 간편하게 할 수 있습니다.
물론 CSS 속성을 보다 견고하게 세분화하여 적용해준다면 center를 사용하는 번거로움도 없어지겠지만, 저는 아래와 같은 방법을 사용하였습니다.
<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
| 번호 | 제목 | 날짜 |
|---|---|---|
| 번호1 | 날짜1 | |
| 번호2 | 날짜2 |