반응형 테이블 CSS 디자인 만들기

안녕하세요 안다형입니다.

오늘은 반응형 테이블 CSS 디자인 만드는 방법을 알아보겠습니다!

 

웹사이트나 블로그를 운영하다 보면 이따금씩 표를 사용해야 하는 때가 있는데요, 그럴 때 표를 반응형으로 그리고 깔끔하고 예쁘게 만들어야 글을 읽는 사람들이 보기가 더 편하겠죠. 알려드리는 대로 따라오면 누구나 반응형 테이블을 만들 수 있을 거예요.

반응형 테이블 예시

위와 같이 표를 만들어볼건데요, 차근차근 따라와 보세요!~

테이블 생성

<table>
    <thead>
        <tr>
            <th>헤더 1</th>
            <th>헤더 2</th>
            <th>헤더 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1행, 1열</td>
            <td>1행, 2열</td>
            <td>1행, 3열</td>
        </tr>
        <tr>
            <td>2행, 1열</td>
            <td>2행, 2열</td>
            <td>2행, 3열</td>
        </tr>
        <tr>
            <td>3행, 1열</td>
            <td>3행, 2열</td>
            <td>3행, 3열</td>
        </tr>
    </tbody>
</table>

먼저 기본적인 테이블의 구조는 다음과 같습니다.

table 태그를 사용하여 테이블을 시작한다는 선언을 해줍니다.

thead 태그는 상단의 헤더 부분입니다. 해당 열의 제목을 적어주는 부분이에요.

tbody 태그는 내용이 들어갈 바디 부분입니다.

tr 태그는 행, td 태그는 열입니다.

구조를 보면 쉽게 이해하실 수 있을 거예요.

 

이대로는 그냥 말 그대로 구조와 내용만 있는 테이블이니 조금 더 그럴싸하게 디자인하고 반응형으로 만들어보겠습니다.

테이블 디자인 CSS

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    background: linear-gradient(to bottom, #ff7f50, #ff6347);
    color: white;
}

th {
    font-size: 18px;
}

tr:hover {
    background: linear-gradient(to bottom, #ffa07a, #ff8c00);
}

table 태그에 width 속성을 100%로 해주었는데요, 테이블 전체 너비를 가로 사이즈에 맞춰주기 때문에 창 너비에 맞춰서 반응형으로 조절됩니다.

border-collapse: collapse는 테두리 간격이 없도록 한 개로 표시합니다.

text-align은 표 내의 글자 정렬 방향을 지정합니다.

tr:hover은 마우스를 올렸을 때 해당 행에 속성을 지정할 수 있습니다.

 

이렇게 표를 만들어 주면, 창 크기에 따라서 반응형으로 크기가 변하는 표를 만들 수 있습니다!

반응형 테이블 예제 파일을 첨부해드리니 필요하신 분들은 다운로드 받아 자유롭게사용하세요👍

table.html

0.00MB