简体   繁体   中英

Help with html table layout

I want to show the below layout using html tables.

 foo      : jack
 products : bag
            bat
            ball
            shoes
 blah     : olah

I tried this but its not working as my expectations.

<table border="1">
  <tr>
  <th>row 1</th>
  <td> Hello</td>
  </tr>
  <tr>
  <th>row 1</th>
  <td>
  <table>
  <tr>foo1</tr>
  <tr>foo2</tr>
  </table>
  </td>
  </tr>
  <tr>
  <th>row 1</th>
  <td> Hello</td>
  </tr>
  </table>

Does this have to be a table ? It seems that something like a definition list might be more appropriate to your usage, so I'd suggest the following as an option:

HTML:

<dl>
    <dt>Foo:</dt>
    <dd>Jack</dd>
    <dt>Products:</dt>
    <dd>Bag</dd>
    <dd>Bat</dd>
    <dd>Ball</dd>
    <dd>Shoes</dd>
    <dt>Blah:</dt>
    <dd>Olah</dd>
</dl>

CSS:

dl {
    width: 50%;
    margin: 0 auto;
}
dt, dd {
    font-size: 1em;
    line-height: 1.2em;
}
dt {
    width: 49%;
    display: inline-block;
    margin-top: 0.2em;
}
dd {
    width: 49%;
    display: block;
    margin-left: 51%;
}

dt + dd {
    display: inline-block;
    margin-left: 0;
    margin-top: 0.2em;
    position: relative;
}

dt + dd:before {
    content: " : ";
    position: absolute;
    left: -1em;
}

And the JS Fiddle demo .

Well this can be achieved by using rowspan

You can handle it using many way, but i just create it in quick way.

http://jsfiddle.net/dXU8D/

 <table width="300" border="1">
 <tr>
   <td width="88">foo      : </td>
    <td width="196">jack</td>
 </tr>
  <tr>
  <td height="99">products : </td>
<td><table width="200" border="1">
  <tr>
    <td>1</td>
   </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
        <td>3</td>
  </tr>
  <tr>
       <td height="59">4</td>
  </tr>
</table></td>
</tr>
<tr>
  <td height="23">blah     : </td>
    <td>olah</td>
  </tr>
</table>

Or you can use rowspan to achieve this. http://jsfiddle.net/Mzyzx/

<table width="300" border="1">
 <tr>
<td width="88">foo      : </td>
<td width="196">jack</td>
 </tr>
 <tr>
<td height="99" rowspan="5">products : </td>
<td>1</td>
 </tr>
 <tr>
  <td>2</td>
 </tr>
  <tr>
   <td>3</td>
  </tr>
 <tr>
   <td>4</td>
 </tr>
  <tr>
  <td>5</td>
</tr>
<tr>
  <td height="23">blah     :</td>
  <td>olah</td>
</tr>
 </table>

I think the problem is that, in your embedded table...

<table>
    <tr>foo1</tr>
    <tr>foo2</tr>
</table>

...you forgot to also wrap them in <td> elements:

<table>
    <tr><td>foo1</td></tr>
    <tr><td>foo2</td></tr>
</table>

But then, of course, you have the problem where the corresponding <th> is aligned in the middle of the table cell, instead of the top. But that can be fixed with the valign property:

<th valign="top">row 1</th>
<table>
<tr>
<td>foo</td><td>:</td><td>jack</td>
</tr>  
<tr>
<td>products</td><td>:</td><td>bag</td>
</tr>
<tr>
<td><td/><td>bat</td>
</tr>
<tr>
<td><td/><td>ball</td>
</tr>
<tr>
<td><td/><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>

Produces:

在此处输入图像描述

The key is that the colons are in a column of their own.

<table>
    <tr>
        <td style="width: 70%;">foo</td><td style="width: 10%;">:</td><td style="width: 20%;">jack</td>
    </tr>
    <tr>
        <td>products </td><td>:</td><td>bag</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td><td>bat</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td><td>ball</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td><td>shoes</td>
    </tr>
    <tr>
        <td>blah</td><td>:</td><td>olah</td>
    </tr>
</table>

one more example to be complete. http://jsfiddle.net/2ufsD/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM