HTML 테이블 데이터 가운데 정렬하는 법

서론

웹 개발을 하다 보면 HTML 테이블을 사용하여 데이터를 정리할 일이 많습니다. 하지만 기본적으로 테이블의 텍스트 정렬은 좌측으로 되어 있어 디자인적으로 다소 아쉬운 경우가 있습니다. 특히, 숫자나 특정 데이터를 가운데 정렬해야 하는 경우가 많죠.

이 글에서는 HTML과 CSS를 활용하여 테이블 안의 데이터를 가운데 정렬하는 다양한 방법을 살펴보겠습니다. HTML 초보자도 쉽게 따라 할 수 있도록 예제와 함께 설명하니 끝까지 읽어보세요!

본론

1. 기본적인 가운데 정렬 방법

가장 간단한 방법은 text-align: center;를 사용하여 테이블 셀의 텍스트를 가운데 정렬하는 것입니다. 다음 예제를 통해 확인해 보겠습니다.

Html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블 가운데 정렬</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
            padding: 8px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
    </table>
</body>
</html>

이 코드를 실행하면 테이블 내의 모든 텍스트가 가운데 정렬됩니다. th, td 요소에 text-align: center;를 적용하여 간단하게 해결할 수 있습니다.

2. `display: flex`를 활용한 정렬

CSS의 display: flex를 활용하면 더욱 정교한 정렬이 가능합니다. 다음 예제는 display: flex를 활용한 가운데 정렬 방법을 보여줍니다.

Html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox를 활용한 테이블 정렬</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
        }
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
        <tr>
            <td class="center">홍길동</td>
            <td class="center">30</td>
            <td class="center">개발자</td>
        </tr>
    </table>
</body>
</html>

이 방법의 장점은 내부 요소가 display: flex의 정렬 방식을 활용하여 더욱 정밀한 가운데 정렬이 가능하다는 것입니다.

3. `vertical-align`을 활용한 수직 정렬

세로 정렬을 맞추기 위해서는 vertical-align: middle;을 활용할 수 있습니다. 다음 예제를 확인해보세요.

Html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>수직 정렬</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
            vertical-align: middle;
            height: 60px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
    </table>
</body>
</html>

이 방법은 테이블 셀 내의 콘텐츠를 수직으로 가운데 정렬하는데 유용합니다. vertical-align: middle;을 사용하면 행의 높이가 달라도 자연스럽게 가운데 정렬됩니다.

마치며

HTML 테이블에서 데이터를 가운데 정렬하는 방법에는 여러 가지가 있습니다. text-align: center;를 사용하는 기본적인 방법부터 display: flex, vertical-align을 활용하는 방법까지 다양한 방식이 존재합니다.

✅ 간단한 텍스트 정렬은 text-align: center; ✅ 더 정교한 정렬이 필요하면 display: flex ✅ 수직 정렬까지 고려하려면 vertical-align: middle;

각 방법의 특징을 잘 이해하고 프로젝트에 맞게 적용하면 더 깔끔한 웹사이트를 만들 수 있습니다. HTML과 CSS의 기본 개념을 확실히 익히고, 실전에서 다양한 정렬 방법을 응용해 보세요! 😊

HTML 테이블 데이터 가운데 정렬하는 법

HTML 테이블 데이터 가운데 정렬하는 법

서론

본론

1. 기본적인 가운데 정렬 방법

2. display: flex를 활용한 정렬

3. vertical-align을 활용한 수직 정렬

마치며

2. `display: flex`를 활용한 정렬

3. `vertical-align`을 활용한 수직 정렬