HTML + CSS Table with different size columns?

Question

This is what I'm looking to get:

layout I am trying to achieve I'd like a category bar on the side, and all the main content in the right box. Right now, I'm attempting to do this with tables, and it's proving to be difficult. Are there any useful CSS functions that I should be using?

Edit: Sorry, here's the current code:

<body>
<img src="xxx">

<table width="100%" border=1>
    <col width="30%">
    <col width="70%">

    <tr>
        <th id="row1">
            Categories
        </th>
        <th id="row1">
            Main Content
        </th>
    </tr>

    </div>


    <tr>
        <th>
            Category Header
        </th>
        <td id="main-content">
            45645
        </td>
    </tr>

    <tr>
        <td>
            <li>
            Category Entry
            </li>
        </td>
    </tr>

</table>

And my current stylesheet:

li {
list-style-type: none;
}

#row1 {
color: ;
}

#main-content {
padding: 9999999;
margin-bottom: 9999999;
}

It is better to use DIV .. than table for layout

VvV
– VvV

2017-01-06 00:27:01 +00:00
Commented Jan 6, 2017 at 0:27 — VvV
– VvV, Commented Jan 6, 2017 at 0:27

Chris Happy · Accepted Answer · 2017-01-06 01:03:38Z

4

Something like this?

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

header {
  width: 100%;
  margin-bottom: 5%;
  background: red;
  padding: 2%;
}

aside {
  clear: left;
  float: left;
  width: 28%;
  margin-right: 2%;
  padding: 2%;
  background: blue;
}

main {
  float: left;
  width: 68%;
  margin-left: 2%;
  padding: 2%;
  background: green;
}

<body>
  <header>This is the header. This is the header. This is the header. This is the header. This is the header. This is the header. This is the header. This is the header. </header>
  <aside>This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar.
    This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. </aside>
  <main>This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main
    content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This
    is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content.
    This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main
    content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This
    is the main content. This is the main content. This is the main content. This is the main content. </main>
</body>

This is a responsive design, but if you don't want it to be, just apply fixed widths.

edited Jan 6, 2017 at 1:03

answered Jan 6, 2017 at 0:27

Chris Happy

7,3352 gold badges28 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chuck Over a year ago

This is cool. I'm trying to set it up for my ebay store, so the responsive design is perfect. I'm not entirely sure how ebay will take special syntax like <aside>, but I'll try it out. Also, ebay won't let me use stylesheets that select all of something, so could I use <aside id="aside1"> ?

Stephen P Over a year ago

<aside> isn't "special syntax", it is a tag in HTML5 as are <header> and <main> — browsers that don't know these tags should treat them like a <div>

Chris Happy Over a year ago

As Stephen P said, the tags aren't "special syntax". And yes you can use <aside id="aside1"> or <aside class="aside1">

Chuck Over a year ago

Gotcha. Thanks for the help fellas. This is great and I didn't know this functionality existed outside of bootstrap.

Joris · Accepted Answer · 2017-01-06 00:50:20Z

1

You can use HTML5 semantic as header, aside or main and CSS Flexbox. Try this snippet :

body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
header {
  flex: 0 1 100%;
  background: red;
}
aside {
  flex: 1 0 25%;
  background: green;
}
main {
  flex: 1 0 75%;
  background: blue;
}

<body>
  <header>Header content</header>
  <aside>Aside content</aside>
  <main>Main content</main>
</body>

edited Jan 6, 2017 at 0:50

answered Jan 6, 2017 at 0:37

Joris

2,83618 silver badges21 bronze badges

Comments

Yaser · Accepted Answer · 2017-01-06 00:30:42Z

0

Your best bet it to use colspan=2 for the first row td's and put a div inside first td of the second row with height="80%":

<table style="height: 200px; width: 200px;">
  <colgroup>
    <col width="30%">
    <col width="70%">
   </colgroup>
      <tr>
        <td style="border: 1px solid black; height: 20px;" colspan="2">First row</td>
      </tr>
      <tr>
        <td style="border: none; padding: 0; margin: 0; vertical-align: top;">
            <div style="height: 80%; border: 1px solid black; margin-top: 0; padding-top: 20px;"> Test <div>
        </td>
        <td style="border: 1px solid black">$100</td>
      </tr>
    </table>

answered Jan 6, 2017 at 0:30

Yaser

5,7391 gold badge18 silver badges28 bronze badges

5 Comments

Chuck Over a year ago

This is exactly what I needed! However, how would I make the text in the second column wrap? I'd like to write paragraphs in there, and even add some images.

Yaser Over a year ago

you can use word-wrap: break-word; or white-space:pre-wrap

Stephen P Over a year ago

@Chase - since you are learning, learn how to use proper tags and CSS to style them -- do not use a table to lay-out how you want your page to look. so 1995.

Yaser Over a year ago

Agree with @StephenP you can do the same with a bunch of div's

Chuck Over a year ago

Yeah totally agree. Tables are not the way to go. Thanks for the help.

EvilNabster · Accepted Answer · 2017-01-06 00:42:03Z

0

I'd suggest you using divs with css, Doesn't seem right to use table in such case.

If you're new to all the html and css things try out Bootstrap

Super easy and pre-made css. You can see examples and follow simple tutorials.

answered Jan 6, 2017 at 0:42

EvilNabster

5161 gold badge6 silver badges20 bronze badges

Collectives™ on Stack Overflow

HTML + CSS Table with different size columns?

4 Answers 4

4 Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related