집 > 기사 > 웹 프론트엔드 > CSS로 HTML 테이블을 아름답게 만드는 방법

CSS로 HTML 테이블을 아름답게 만드는 방법

藏色散人원래의: 2021-02-05 09:16:514640검색

CSS를 사용하여 HTML에서 표를 아름답게 만드는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 표를 만들고 마지막으로 스타일 태그를 통해 표에 CSS 스타일을 추가합니다.

이 문서의 운영 환경: Windows7 시스템, HTML5&&CSS3, Dell G3 컴퓨터.

HTML에서 CSS로 테이블을 아름답게 만드는 방법은 무엇입니까?

아래 예시를 통해 살펴보겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            /*表格样式*/            
            table {
                width: 90%;
                background: #ccc;
                margin: 10px auto;
                border-collapse: collapse;
                /*border-collapse:collapse合并内外边距
                (去除表格单元格默认的2个像素内外边距*/ 
            }               
            th,td {
                height: 25px;
                line-height: 25px;
                text-align: center;
                border: 1px solid #ccc;
            }       
            th {
                background: #eee;
                font-weight: normal;
            }       
            tr {
                background: #fff;
            }       
            tr:hover {
                background: #cc0;
            }       
            td a {
                color: #06f;
                text-decoration: none;
            }       
            td a:hover {
                color: #06f;
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <!-- th为表格标题栏-->
                <th>序号</th>
                <th>职位名称</th>
                <th>招聘人数</th>
                <th>工作地点</th>
                <th>有效时间</th>
                <th>职位描述</th>
            </tr>
            <tr>
                <td>1</td>
                <td>保安人员</td>
                <td>3至4人</td>
                <td>洞头</td>
                <td>2006.12.08</td>
                <td>
                    <a href="#">查看</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>项目技术人员</td>
                <td>1人</td>
                <td>洞头</td>
                <td>2006.10.08</td>
                <td>
                    <a href="#">查看</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>总经理助理</td>
                <td>1人</td>
                <td>温州</td>
                <td>2006.07.11</td>
                <td>
                    <a href="#">查看</a>
                </td>
            </tr>
        </table>
    </body>
</html>

렌더링:

CSS로 HTML 테이블을 아름답게 만드는 방법

CSS로 HTML 테이블을 아름답게 만드는 방법

관련 기사