CSS Table

HTML & CSS
1

Hello again.

I have been looking all over the internet on how to make a table using CSS.

This is what I have came up with so far, but it doesn’t work correctly.

ORIGINAL

<table width="70%">
<tr><td width="20%">ID:</td><td>{{id}}</td></tr>
<tr><td width="20%">Username:</td><td>{{username}}</td></tr>
<tr><td width="20%">Email:</td><td><input type="text" name="email" size="30" maxlength="100" value="{{email}}" /></td></tr>
<tr><td width="20%">Auth Level:</td><td><select name="authlevel"><option value="0" {{auth0select}}>User</option><option value="1" {{auth1select}}>Admin</option><option value="2" {{auth2select}}>Blocked</option></select></td></tr>
</table>

My best guess:


.container{
width:50%;
}
.cell1 {
width:15%;
}
.cell2 {
width:35%;
}
.cell1{
float:left;
background:#00ff00;
}
.cell2{
float:right;
background:#0000ff;
}
 
<div class="container">
<div class="cell1">ID:</div><div class="cell2">{{id}}</div>
<div class="cell1">Username:</div><div class="cell2">{{username}}</div>
<div class="cell1">Email:</div><div class="cell2"><input type="text" name="email" size="30" maxlength="100" value="{{email}}" /></div>
<div class="cell1">Auth Level:</div><div class="cell2"><select name="authlevel"><option value="0" {{auth0select}}>User</option><option value="1" {{auth1select}}>Admin</option><option value="2" {{auth2select}}>Blocked</option></select></div>
</div>

They just don’t align right and doesn’t look right.

2

why would you MAKE a table using CSS. It’s not like its not possible. there is display:table, display table-row, display:table-cell. But it is convoluted to use, for creating tables out divs, it is not supported by early versions of IE… and MOST OF ALL ITS NOT SEMANTICALLY CORRECT. Dont use tables to do layout, but don’t use DIVs to present tabular data.

That being said… are you trying to present data or are you trying to layout a form?

3

It never ceases to amaze me. I am wrong if I do something one way, wrong if I do it another.

If I use tables, someone says “Why dont you use CSS?!” and boggles me. If I try to use CSS, people yell “WHY?”

I am so confused by the community.

Just making a FORM. Want a column with the label ( name ) and a column for the data.

Sorry!

4

You’re right to want to use CSS, but wrong to think of it as “making a table with CSS”. What you should be trying to do is to make the right structure with HTML+CSS - the fact that you hacked it together with tables before doesn’t mean that you need to slavishly recreate those tables now!

First things first - in a form, the labels for each input should be marked up with <label> tags. That means that you can click on the label and it will act as though you clicked on the input (useful, particularly for small input fields, checkboxes and radio buttons), and it helps access technology to fit everything together.

Second things second - I’m assuming that the ID and Username lines are set values, so we can use a definition list there. As well as being semantically appropriate, it also helps us to break down the contents into similar type chunks as we will use for the input lines.

So, let’s have

<form>
<dl>
<dt>ID</dt> <dd>{{id}}>/dd>
<dt>Username</dt> <dd>{{username}}</dd>
</dl>
<div>
<label for="email">Email</label>
<input name="email" id="email">
</div>
<div>
<label for="authlevel">Auth level</label>
<select name="authlevel" id="authlevel">{{list of <option> items}}</select>
</div>
</form>

That gives us the underlying structure we want. Now comes the funky part - making it look right.

dt, label {float:left; width:6em; clear:left;}
dd, input, select {float:left; width:8em;}
dd {margin-left:0;}
form {line-height:1.75em;}

If we float the <dt> and <label> elements and give them the same width, we can ensure they behave in the same way. The clear:left; there is needed to get them to start a new line.

We can then float the <dd> and <input> elements and give them the same width. You need to zero the left-margin in the <dd> because it has a default margin that you’ll want to get rid of. No clearing this time, because we want them to follow on from the previous element.

And finally, the line-height on the <form> is a nice easy way to ensure the vertical spacing between the text is the same all the way down. Change the widths and the line-height to suit your design.