Question

picture example

我是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>

Answer 1

这就是你要完成你想要完成的事情的方式（创建你网站的表格格式）。我建议你花一些时间学习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>

Answer 2

欢迎来到Stack。

首先，我强烈建议你浪费一些时间学习Code Pen，桌面布局是旧时尚，而且很难应用维护。

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

我已经开发了这个https://mir-s3-cdn-cf.behance.net/project_modules/1400/3abb6f41658891.57b122eb4e3eb.jpg，展示了如何创建你正在寻找的那种浮动元素，但我已经使用了一些css样式（我建议你也要学习它，现在这非常重要））。

如果您需要一些提示或链接来研究，请致电我的收件箱：）

Answer 3

这将以灵活的布局完成菜单导航的技巧。

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

〜专利

HTML表格页面布局

3 个答案: