Forum Moderators: open
I have a table that I am trying to format but I can not seem to get it formated exactly like I want. The problem I am encountering is that under the 2d Software column I defined each table cell as 100 pixels wide so it would line up exactly with the 200 pixel table called '2d Software". The second column is not lining up exactly vertically. How would I go about fixing this?
Thanks
Josh
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title Title Title</title>
<table border = "1" width="780">
<tr>
<th rowspan="4" style="width=97"><h2>Software Skills:</h2></th>
<th style ="width=200">3D Software</th>
<th style ="width=200">2D Software</th>
<th style ="width=200">Programming Software</th>
</tr>
<tr>
<td style ="width=200">Maya 2008</td>
<table border="0" width="200">
<tr>
<td style = "width=100">Photoshop CS3</td>
<td style = "width=100">llustrator CS3</td>
</tr>
</table>
</td>
<td style ="width=200">Visual Studio.Net</td>
</tr>
<tr>
<td style ="width=200">3D Studio Max 2008</td>
<td>
<table border="0" width="200">
<tr>
<td style = "width=100">Dreamweaver CS3</td>
<td style = "width=100">Flash CS3</td>
</tr>
</table>
</td>
<td style ="width=200"></td>
</tr>
<tr>
<td style ="width=200">Zbrush 2.1</td>
<td>
<table border="0" width="200">
<tr>
<td style = "width=100">Illustrator CS3</td>
<td style = "width=100">After Effects CS3</td>
</tr>
</table>
</td>
</table>
[[b]edited by: tedster at 7:02 am (utc) on Feb. 27, 2009]
[edit reason] remove specifics [/edit]
But don't do it yet. :-) I can see two problems right off the top . . .
- Get rid of all the white space in your attributes (not the problem, but will kick errors in some validators.)
Change
<table border = "1" width="780">
to
<table border="1" width="780">
throughout.
- Next, probably the largest cause of your problem:
style="width=97"
Two things here, you set a style with a colon, not an =, and you have to specify a unit. Valid units are px (pixels,) em (ems,) % (percent,) and pt (points, least used as this is a printing specification.)
style="width:97px"
You are using tables for layout, and worse yet nested tables, which is a bad idea for many reasons, but those reasons are not relevant to your problem. Fix the two above, validate the document, and see if it's working out.
You mentioned that nested tables are generally bad. So what would be a better way to setup my resume? Currently my website is setup using DIV's and the only place I am using a table is within my resume page.
Thanks
Josh
I dropped it into the validator, and there's a few I'd missed - namely, no closing head tag, no body tag, and this
<td style ="width=200">Maya 2008</td>
<table border="0" width="200">
is also invalid, a table between rows. I'm not sure how that validated, but if it's fixed, all good.
You mentioned that nested tables are generally bad.
This is really a topic for a new thread, one of many heated discussions here on WebmasterWorld. It is one of accessibility and semantic HTML; tables are for tabular data, and when a screen reader reads tables that is what it's expecting.
At the very least, you begin by killing your nested tables (and correctly putting that content actually in a cell:)
<tr>
<td style="width=200">
<h5 style="margin:0;padding:0;">Maya 2008</h5>
<p style="width=100;float: left;">Photoshop CS3</p>
<p style="width=100;float: right;">llustrator CS3</p>
</td>
</tr>
Poof. One table gone. (You may not need to float left and right, you'll have to play with it.)
Then you put a border on the outer table and visualize, how can I do this without a table?
