HTML 테이블 레이아웃 예시 설명
- 高洛峰원래의
- 2017-02-22 11:31:101912검색
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 테이블 레이아웃 예제와 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.