HTMLテーブルのページレイアウト

-1

私は初心者ですが、私はテーブルレイアウトを作成しようとしています。これまで私はテーブルの行、高さ、データなどを行ってきました。私が把握できないのは、写真の上にある6つの正方形（家、私について、製品など）のようなものです。どんな助けもありがとう。これは、あなたは文字通りあなたが（あなたのウェブサイトの表形式の作成）を達成しようとしている何だろうかある

<!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を学び、適切なnavbarと反応性の高いウェブページを構築するのに時間を費やすことをお勧めします。それは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

スタックへようこそ。

まず、私は時間を無駄にして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; 
}

私はあなたが探しているが、私はいくつかのCSSスタイルを使用しました（と私はあまりにもそれを学ぶためにあなたをアドバイス浮動要素のようなものを作成する方法を示し、このCode Penを開発しました、それは今日では非常に重要です）。

あなたは柔軟なレイアウトのメニューナビゲーションのためのトリックを行います:)

出典

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ファイル：SO Canoli上

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 
{ 
}

〜パット

出典

2017-03-18 19:42:24

HTMLテーブルのページレイアウト

答えて

関連する問題