making tables look like newspaper columns

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

making tables look like newspaper columns

Post by daedalus__ »

i need to do this but i really can't remember for the life of me.

this isn't for a website. i made a script to calculate some tool information and i need to lay it out so it is nice for printing, that is all. so, however ugly the code, i just need it to work.

thanks :)
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: making tables look like newspaper columns

Post by kaszu »

What have you tried? Also be more specific, what you mean by "like newspaper columns", is it just several columns with white space between them?
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: making tables look like newspaper columns

Post by daedalus__ »

Usually if I post here it's because I'm not trying. I just did it programmatically. I thought there was an easy way using deprecated HTML but I couldn't find one.

-----------------------------------------------
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |

like that
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: making tables look like newspaper columns

Post by pickle »

Three divs, all floated left, with the appropriate margin-left set, should work.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: making tables look like newspaper columns

Post by John Cartwright »

I've always used floats with relative widths.

Code: Select all

<style>
   div.column {
      float: left; 
      width: 33%;
   }
</style>
 
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
 
Post Reply