HTML表格頁面佈局

-1

我是一個HTML初學者，我正在嘗試製作表格佈局。到目前爲止，我已經完成了表格的行數，高度，數據等等。我無法弄清楚的是像圖片上面的六個方框（家庭，關於我，產品等）。任何幫助，將不勝感激。

這裏是我到目前爲止的代碼：

<!DOCTYPE HTML> 

<html> 
<head> 

<title>WEB PAGE TITLE GOES HERE</title> 

</head> 

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> 

<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> 
<tr> 

<!-- ============ HEADER SECTION ============== --> 
<td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> 




<tr> 
<!-- ============ LEFT COLUMN (MENU) ============== --> 
<td width="20%" valign="top" bgcolor="#999f8e"> 
<a href="#">Menu link</a><br> 
<a href="#">Menu link</a><br> 
<a href="#">Menu link</a><br> 
<a href="#">Menu link</a><br> 
<a href="#">Menu link</a> 
</td> 

<!-- ============ MIDDLE COLUMN (CONTENT) ============== --> 
<td width="55%" valign="top" bgcolor="#d2d8c7"> 



</td> 

<td width="25%" valign="top" bgcolor="#999f8e">&nbsp;</td> 

</tr> 

<!-- ============ FOOTER SECTION ============== --> 
<tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr> 
</table> 
</body> 

<html>

來源

2017-03-18 Canoli

歡迎。你可以添加你的問題你的表HTML代碼？其他人可以幫助你更快。 – Stephan

請分享您當前的HTML代碼。 –

我已添加我的html代碼。謝謝！ – Canoli

這是你會怎麼做字面上你正在試圖完成（創建您的網站的表格格式）的東西。我建議你花一些時間學習bootstrap雖然和建立一個適當的導航欄和響應網頁。它會比在html表上處理更好。

<table class="table table-hover"> 
    <thead> 
    <tr> 
     <td>Home</td> 
     <td>About Me</td> 
     <td>Product</td> 
     <td>Services</td> 
     <td>Maps</td> 
     <td>Contact Me</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td colspan="2">This area will contain the Local Navigation</td> 
     <td colspan="2">This area will contain information about me</td> 
     <td colspan="2">This area will contain statistics of customer satisfaction</td> 
    </tr> 
    </tbody> 
</table>

來源

2017-03-18 18:27:48 Dom

歡迎使用Stack。

首先，我強烈建議你浪費一些時間和學習Bootstrap，表格佈局是舊的時尚，他們很難申請維護。

table .menu div{ 
    background: yellow; 
    color: blue; 
    display: block; 
    float: left; 
    width: 14.66666666666667%; 
    margin: 1%; 
    padding: 1px; 
    border: solid 4px blue; 
    box-sizing: border-box; 
    text-align: center; 
}

我開發這個Code Pen展示瞭如何創建那種浮動，你正在尋找的元素，但我已經使用了一些CSS樣式（我建議你去學習它太，這是非常重要的今天）。

打電話，如果你想一些提示或鏈接學習:)

來源

2017-03-18 18:35:18

這將這樣的伎倆在一個靈活的佈局菜單導航我的收件箱。

HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Menu Demo</title> 
    <link rel="Stylesheet" href="style.css"> 
</head> 
<body> 
    <div id="container"> 
     <nav> 
      <span class=menu_item>Home</span> 
      <span class=menu_item>About me</span> 
      <span class=menu_item>Product</span> 
      <span class=menu_item>Services</span> 
      <span class=menu_item>Maps</span> 
      <span class=menu_item>Contact me</span> 
     </nav> 
    </div> 
</body> 
</html>

CSS文件：

body 
{ 
    font-size: 100%; 
    padding: 0; 
    border: 0; 
    margin: 0; 
} 

nav 
{ 
    display: flex; 
    width: 100%; 
    flex-flow: row nowrap; 
    justify-content: space-around; 
    background-color: cyan; 
    padding: 0 10px 30px 0; 
} 


.menu_item 
{ 
    font-size: 1em; 
    border: 3px solid blue; 
    color: blue; 
    margin: 3px; 
    min-height: 2.5em; 
    width: 14%; 
    text-align: center; 
    text-decoration: underline; 
    background-color: yellow; 
} 

#container 
{ 
}

〜帕特SO Canoli

來源

2017-03-18 19:42:24

HTML表格頁面佈局

回答

相關問題