HTML과 CSS를 사용하여 간결한 테이블 레이아웃을 구현하는 방법-HTML 튜토리얼-php.cn

HTML과 CSS를 사용하여 간결한 테이블 레이아웃을 구현하는 방법

王林

풀어 주다： 2023-10-19 10:34:48

원래의

803명이 탐색했습니다.

HTML과 CSS를 사용하여 간결한 테이블 레이아웃을 구현하는 방법

HTML과 CSS를 사용하여 간단한 테이블 레이아웃을 구현하는 방법

HTML과 CSS는 프런트 엔드 개발에서 가장 일반적으로 사용되는 두 가지 언어이며 웹 페이지를 만들고 아름답게 만드는 데 사용할 수 있습니다. 테이블은 웹 페이지의 공통 요소 중 하나이며 데이터를 표시하는 데 사용됩니다. HTML과 CSS를 사용하여 간단한 테이블 레이아웃을 구현하는 방법은 무엇입니까? 구체적인 단계는 아래에 제공된 코드 예제와 함께 설명되어 있습니다.

1단계: HTML 구조 만들기
먼저 HTML 파일을 만들고 테이블의 기본 구조를 파일에 추가해야 합니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>简洁表格布局</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
            </tr>
            <tr>
                <td>数据4</td>
                <td>数据5</td>
                <td>数据6</td>
            </tr>
            <tr>
                <td>数据7</td>
                <td>数据8</td>
                <td>数据9</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

로그인 후 복사

위 코드에서는 테이블과 테이블의 내용을 포함한 기본 HTML 구조를 생성했습니다.

2단계: CSS 스타일 추가
다음으로 CSS를 사용하여 테이블을 아름답게 만들어야 합니다. style.css라는 CSS 파일을 만들고 HTML 파일에 포함합니다. 코드는 다음과 같습니다.

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

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f5f5f5;
}

로그인 후 복사

위 코드에서는 CSS 스타일을 설정하여 테이블을 아름답게 만듭니다. 특정 스타일은 다음과 같습니다:

표 너비를 100%로 설정하고 border-collapse 속성을 사용하여 테두리를 선으로 병합합니다.
패딩 및 텍스트 정렬을 포함하여 표 헤더 및 표 내용에 대한 스타일을 설정합니다.
헤더의 배경색을 밝은 회색으로 설정하세요.
n번째 자식 의사 클래스 선택기를 사용하여 테이블 중앙의 짝수 행에 배경색을 추가합니다.
마우스 오버 시 테이블 행의 배경색을 설정합니다.

3단계: 테이블 스타일 조정
필요에 따라 테이블 스타일을 추가로 조정할 수 있습니다. 예를 들어 표의 테두리와 텍스트 색상을 설정하고 표 머리글과 표 내용의 스타일을 조정할 수 있습니다.

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    color: #333;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f5f5f5;
}

로그인 후 복사

위 코드에서는 테두리 스타일을 추가하고 텍스트 색상을 검은색으로 설정했습니다. 동시에 헤더의 글꼴을 굵게 설정하여 강조 표시합니다.

이제 간단한 테이블 레이아웃 구현이 완료되었습니다. 실제 필요에 따라 추가 스타일 조정이 이루어질 수 있습니다.

요약:
HTML과 CSS를 사용하면 간결한 테이블 레이아웃을 쉽게 구현할 수 있습니다. 먼저 HTML 파일을 생성하고 파일에 테이블의 기본 구조를 추가해야 합니다. 그런 다음 CSS 스타일을 사용하여 표를 아름답게 만들고 표의 테두리, 텍스트 정렬, 배경색 및 기타 속성을 설정합니다. 마지막으로 필요에 따라 테이블 스타일을 추가로 조정하여 디자인 요구 사항에 더 부합하도록 만듭니다. 동시에 CSS를 사용하여 마우스를 가리키면 테이블 행의 색상을 변경하는 등 일부 대화형 효과를 얻을 수도 있습니다.

위 내용은 HTML과 CSS를 사용하여 간결한 테이블 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!