집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 테이블을 사용하는 두 가지 방법(예)

CSS에서 테이블을 사용하는 두 가지 방법(예)

不言원래의: 2018-08-06 16:53:162893검색

이 글에서는 CSS에서 테이블을 사용하는 두 가지 방법(예제)을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 일반 테이블 #

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>CSS 表格。</title>
    <style>
        table {            
       
        width: 50%;            
        border-collapse: collapse; 
            /*border-collapse 属性设置是否将表格边框折叠为单一边框*/
        }

        table, th, td {            
        border: 1px solid blue;        
        }

        th {            
        height: 50px;            
        background-color: green;            
        color: white;        
        }

        td {            
        text-align: center;            
        padding: 5px; /*表格内边距*/
        }
    </style></head><body><table>
    <tr>
        <th>Firsetname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>jack1</td>
        <td>jack2</td>
    </tr>
    <tr>
        <td>jack3</td>
        <td>jack4</td>
    </tr>
    </table>
    </body>
    </html>

CSS에서 테이블을 사용하는 두 가지 방법(예)

관련 기사