这次给大家带来HTML的表格应该怎样布局,布局HTML的表格注意事项 有哪些,下面就是实战案例,一起来看一下。
HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局。但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法来实现这种布局,通常的解决方案是:使用区块元素
或 表格(
)来布局 Web 页面的内容。
使用表格进行布局,是一种较老的布局解决方案。并不推荐使用,我们应该总是使用表格来显示表格化的数据。
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>
<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;
} Salin selepas log masuk
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
怎样让移动端的网页内容自适应
table表格中的内容溢出应该如何处理
在HTML中iframe与frame有哪些区别
Atas ialah kandungan terperinci HTML的表格应该怎样布局. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
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
Topik-topik yang berkaitan
Lagi>