HTML 테이블 레이아웃 예시 설명-HTML 튜토리얼-php.cn

HTML 테이블 레이아웃 예시 설명

高洛峰

풀어 주다： 2017-02-22 11:31:10

원래의

1869명이 탐색했습니다.

HTML 문서의 요소는 차례대로 배열되며, 블록 수준 요소 앞뒤에 줄 바꿈만 추가하면 간소화된 레이아웃이 됩니다. 그러나 우리가 보는 웹 페이지는 특정 규칙(보통 다중 열)에 따라 배치되므로 이 레이아웃을 달성하려면 특정 방법을 사용해야 합니다. 일반적인 해결책은 블록 요소나 테이블()를 사용하여 웹페이지의 콘텐츠를 배치합니다.

테이블을 사용하는 레이아웃은 오래된 레이아웃 솔루션입니다. 이는 권장되지 않습니다. 표로 작성된 데이터를 표시하려면 항상 표를 사용해야 합니다.

HTML 문서

<!DOCTYPE html>   
<html lang="en">   
<head>   
    <meta charset="UTF-8">   
    <!-- 链接到外部样式表 -->   
    <link rel="stylesheet" href="css/mystyle.css">   
    <title>Island estaurant</title>   
</head>   
<body>   
    <table id="container">   
        <!-- 头部 -->   
        <tr>   
            <td id="header" colspan="2">   
                <h1>点菜系统</h1>   
            </td>   
        </tr>   
        <!-- 主体 -->   
        <tr>   
            <!-- 菜单 -->   
            <td id="menu">   
                <b>菜品</b><br>   
                <p id="dishes">   
                    小鸡炖蘑菇<br>   
                    家常豆腐<br>   
                    酸辣土豆丝<br>   
                </p>   
            </td>   
            <!-- 内容 -->   
            <td id="content">   
                小鸡炖蘑菇：<br>   
                幼鸡一只   
            </td>   
        </tr>   
        <!-- 尾部 -->   
        <tr>   
            <td id="footer" colspan="2">世俗孤岛的餐厅</td>   
        </tr>   
    </table>   
</body>   
</html>

로그인 후 복사

CSS 파일

/*整个点餐系统的界面*/  
#container   
{   
    width: 600px;   
    margin: 100px;   
    /*取消单元格边框之间的边距*/  
    border-spacing: 0;   
}   
/*点餐系统界面的头部*/  
#header  
{   
    background-color: red;   
    text-align: center;   
}   
h1   
{   
    margin-bottom: 0px;   
}   
/*点餐系统界面的菜单*/  
#menu  
{   
    background-color: #FFD700;   
    height: 200px;   
    width: 150px;   
}   
#dishes  
{   
    padding-top: 10px;   
    padding-left: 10px;   
    line-height: 20px;   
}   
/*点餐系统界面的菜品详情*/  
#content   
{   
    background-color: gray;   
    height: 200px;   
    width: 450px;   
}   
/*点餐系统界面的尾部*/  
#footer  
{   
    background-color: blue;   
    height: 25px;   
    text-align: center;   
}

로그인 후 복사

렌더링:

HTML 테이블 레이아웃 예시 설명