이번에는 HTML 테이블을 배치하는 방법과 HTML 테이블을 배치할 때 어떤 주의 사항을 취해야 하는지 알려드리겠습니다. 실제 사례를 살펴보겠습니다. HTML 문서의 요소는 차례대로 정렬됩니다. 블록 수준 요소 앞뒤에 줄 바꿈을 추가하면 간소화된 레이아웃이 됩니다. 그러나 우리가 보는 웹 페이지는 특정 규칙(보통 다중 열)에 따라 배치되므로 이 레이아웃을 달성하려면 특정 방법을 사용해야 합니다. 일반적인 해결책은 블록 요소 또는 테이블(
)을 사용하여 웹페이지의 콘텐츠를 배치합니다.
레이아웃에 테이블을 사용하는 것은 오래된 레이아웃 솔루션입니다. 이는 권장되지 않습니다. 표 형식의 데이터를 표시하려면 항상 표를 사용해야 합니다.
HTML Document
<!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>
<div id="dishes">
小鸡炖蘑菇<br>
家常豆腐<br>
酸辣土豆丝<br>
</div>
</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;
} 로그인 후 복사
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
모바일 웹 페이지 콘텐츠를 적응형으로 만드는 방법
테이블 테이블의 콘텐츠 오버플로를 처리하는 방법
HTML에서 iframe과 프레임의 차이점은 무엇인가요
위 내용은 HTML 테이블은 어떻게 배치해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
2018-06-11 11:57:34
2018-06-15 15:55:18
2018-06-15 15:49:00
2018-06-15 15:46:15
2018-06-15 15:42:38
2018-06-15 15:40:34
2018-06-15 15:39:32
2018-06-15 15:37:14
2018-06-15 15:34:21
2018-06-15 15:22:51