이번에는 HTML 테이블을 배치하는 방법과 HTML 테이블을 배치할 때 어떤 주의 사항을 취해야 하는지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
HTML 문서의 요소는 차례대로 정렬됩니다. 블록 수준 요소 앞뒤에 줄 바꿈을 추가하면 간소화된 레이아웃이 됩니다. 그러나 우리가 보는 웹 페이지는 특정 규칙(보통 다중 열)에 따라 배치되므로 이 레이아웃을 달성하려면 특정 방법을 사용해야 합니다. 일반적인 해결책은 블록 요소 또는 테이블( f5d188ed2c074f8b944552db028f98a1)을 사용하여 웹페이지의 콘텐츠를 배치합니다.
레이아웃에 테이블을 사용하는 것은 오래된 레이아웃 솔루션입니다. 이는 권장되지 않습니다. 표 형식의 데이터를 표시하려면 항상 표를 사용해야 합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!