html嵌套表格示例

時間 2019-11-17

標籤 html 嵌套表格示例欄目 HTML 简体版

原文原文鏈接

經常使用嵌套表格示例，出自《網頁開發手記：HTML+CSS+JavaScript實戰詳解》html

	<html>
	<head>
	<title>嵌套表格佈局網頁</title>
	</head>
	<body topmargin="0" bottommargin="0">
	<table width="500" height="400" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#999999">
	<tr>
	<td height="100"><table width="100%" height="100%" border="0" cellspacing="2">
	<tr>
	<td width="112" align="center" bgcolor="#CCCCCC">企業標誌</td>
	<td align="center">企業宣傳動畫</td>
	<td width="120"><table width="100%" height="100" border="0">
	<tr>
	<td>Email聯繫咱們</td>
	</tr>
	<tr>
	<td>業務電話：</td>
	</tr>
	<tr>
	<td>公司地址：</td>
	</tr>
	</table></td>
	</tr>
	</table></td>
	</tr>
	<tr>
	<td height="20"><table width="80%" border="0" align="center" cellpadding="0" cellspacing="2">
	<tr align="center">
	<td bgcolor="#CCCCCC">公司首頁</td>
	<td>公司介紹</td>
	<td>公司產品</td>
	<td>公司文化</td>
	<td>公司論壇</td>
	</tr>
	</table></td>
	</tr>
	<tr>
	<td valign="top"><table width="100%" height="100%" border="0">
	<tr>
	<td width="20%" valign="top"><table width="100%" height="200" border="0" bgcolor="#CCCCCC">
	<tr>
	<td align="center">文章列表</td>
	</tr>
	<tr>
	<td>1.文章標題1</td>
	</tr>
	<tr>
	<td>2.文章標題2</td>
	</tr>
	<tr>
	<td>3.文章標題3</td>
	</tr>
	<tr>
	<td>4.文章標題4</td>
	</tr>
	</table></td>
	<td valign="top"><table width="100%" height="200" border="0" cellspacing="0">
	<tr>
	<td height="45" align="center"><strong>文章標題</strong></td>
	</tr>
	<tr>
	<td valign="top" bgcolor="#cccccc">文章內容</td>
	</tr>
	</table></td>
	</tr>
	</table></td>
	</tr>
	<tr>
	<td height="75"><table width="200" border="0" align="center">
	<tr>
	<td>網站備案：</td>
	</tr>
	<tr>
	<td>公司信息：</td>
	</tr>
	<tr>
	<td>公司年份：</td>
	</tr>
	</table></td>
	</tr>
	</table>
	</body>
	</html>

表格效果：佈局

相關文章

相關標籤/搜索

PHP 7 新特性

Thymeleaf 教程

代碼格式化

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<