규호의 공부방: CSS 표 꾸미기

표의 특징

표에 대한 HTML의 기본 디자인은 표 전체의 테두리와 셀(cell) 사이에 여백이 기본적으로 지정되어 있다. 이 여백을 무시하려면 <table> 태그에 border-collapse 효과의 값으로 collapse를 주면 된다.

예제

example1.html - (jsfiddle, github)

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

        <style>

            table{

                border:1px solid gray;

                border-collapse: collapse;

            }

            th{

                background-color: #d0d0d0;

                font-weight:bold;

            }

            th,td{

                border:1px solid gray;

                padding:5px;

            }

        </style>

    </head>

    <body>

        <table>

            <tr>

                <th>순서</th>

                <th>과목명</th>

                <th>토픽수</th>

            </tr>

            <tr>

                <td>1</td>

                <td>웹서비스 만들기</td>

                <td>12</td>

            </tr>

            <tr>

                <td>2</td>

                <td>HTML 수업</td>

                <td>13</td>

            </tr>

            <tr>

                <td>3</td>

                <td>HTML 수업</td>

                <td>9</td>

            </tr>

            <tr>

                <td>4</td>

                <td>CSS 수업</td>

                <td>15</td>

            </tr>

        </table>

    </body>

</html>

참고

HTML 표 수업

규호의 공부방

2016년 10월 19일 수요일

CSS 표 꾸미기

표의 특징

예제

참고

댓글 없음:

댓글 쓰기