Basic table cell formatting question

ijabz · #1 01-23-2007, 08:35 AM

On my page heading I have two clickable images on the left hand side and two on three on the right handside. Each image is within a <td>. My problem is getting the heading to look correct on different size screens. At the moment I align my left-handside cells left and my right-handside cells right, but I have to add a cell with alignment center to stop my cells being spaced along the top. But if I set the center cell too wide either via width = percentage or pixel width then the icons becomes cramped, but if I get it right for one screen width it looks messed up on another screen width. pleaswe what is the correct way of doing this.

Centauri · #2 01-23-2007, 08:57 AM

Quote:

Originally Posted by ijabz

pleaswe what is the correct way of doing this.

Not to use tables at all......

Can you provide a picture of what you are trying to achieve?

ijabz · #3 01-23-2007, 09:58 AM

Image attached, and my current code below:

<table width="100%" cellpadding="0" cellspacing="0">
<tr bgcolor="#7DC0FF">
<td align="left" valign="top" width="10" bgcolor="#7DC0FF"></td>
<td width="64px" align="left" bgcolor="#7DC0FF"><img src="/jaikoz/images/bug64x64.gif" height="64" width="64" alt="Jaikoz"></td>
<td width="10px" align="left" bgcolor="#7DC0FF">
<td width="154px" align="left" bgcolor="#7DC0FF"><img src="/jaikoz/images/jaikoz.gif" alt="Jaikoz"></td>
<td width="500px" align="center" bgcolor="#7DC0FF">
<td width="88px" align="right" bgcolor="#7DC0FF">
<a href="http://www.musicbrainz.org" target="_blank"><img align="right" border="0" src="/jaikoz/images/poweredbymusicbrainz.png" alt="Powered by Musicbrainz" height="31" width="88"></a>
</td>

<td width="31px" align="right" bgcolor="#7DC0FF">
<a href="http://www.musicip.com" target="_blank"><img align="right" border="0" src="/jaikoz/images/connected_by_musicip.gif" alt="Powered by MusicIP" height="31" width="88"></a>
</td>
<td width="81px" align="right" bgcolor="#7DC0FF">
<a href="http://validator.w3.org/check?uri=referer" target="_blank"><img align="right" border="0" src="/jaikoz/images/valid-html401.png" alt="Valid HTML 4.01!" height="31" width="88"></a>
</td>
<td valign="top" width="10px" bgcolor="#7DC0FF"></td>
</tr>
</table>

thanks

Centauri · #4 01-23-2007, 06:42 PM

Think CONTENT. At the moment, your images-in-tables layout is not understandable to screen readers, search engines, text-only browsers etc, so we need some content. The "Jaikoz" graphic is obviously a page heading, so make it one - a h1 heading. Next, the graphics on the right are external links, so we can enter them as an unordered list. As this whole section has a common background colour, we can group all these contents in one div. Therefore, the html so far would be

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

</head>

<body>
<div id="header">
  <h1>Jaikoz</h1>
  <ul>
    <li><a href="http://validator.w3.org/check?uri=referer">Valid HTML 4.01!</a></li>
    <li><a href="http://www.musicip.com">Powered by MusicIP</a></li>
    <li><a href="http://www.musicbrainz.org">Powered by Musicbrainz</a></li>
  </ul>
</div>
</body>
</html>

Note there is no styling yet, the page is understandable, and there are no tables (important).

Now we can set about styling this. As the whole header bar is 64px high, we can style it as a block 64px high, with the bug as a background image 10px from the left, and with 10px side margins to provide a gap to the side of the page.

The h1 header can also be styled as a block 64px x 208px with the Jaikoz graphic as its background, a left margin of 82px to clear the bug, and a font size of 1px and indent of -1000px shoves the actual text off the page.

The right-hand links are then given their graphics as backgroung images using inline styles, whilst the css styles them as a 31 x 88px block - again the 1px font size and negative indent shoves the text off the page. Each list li is then floated right with a 2px left margin for spacing - this then sits all the link images side by side. Finally, the list itself is floated right to put the graphics at the right side of the page - the right margin gives the group some space from the edge, whilst the negative top margin pulls the group back up from where it would normally be positioned below the h1 graphic, and the inline style corrects an IE float margin bug.

So the whole page code (including css, which can be put into an external file instead) is

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	border: 0;
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#header {
	display: block;
	height: 64px;
	overflow: hidden;
	background-color: #7DC0FF;
	background-image: url(jaikoz/images/bug.gif);
	background-position: 10px 0;
	background-repeat: no-repeat;
	margin: 0 10px;
}
#header h1 {
	font-size: 1px;
	text-indent: -1000px;
	display: block;
	width: 208px;
	height: 64px;
	background-image: url(jaikoz/images/jaikoz.gif);
	margin: 0 0 0 82px;
}
#header ul {
	float: right;
	display: inline;
	height: 31px;
	margin: -47px 10px 0 0;
	list-style: none;
}
#header li {
	float: right;
	margin-left: 2px;
}
#header a {
	display: block;
	width: 88px;
	height: 31px;
	font-size: 1px;
	text-indent: -3000px;
}
-->
</style>
</head>

<body>
<div id="header">
  <h1>Jaikoz</h1>
  <ul>
    <li><a href="http://validator.w3.org/check?uri=referer" style="background-image:url(jaikoz/images/valid-html401.png)">Valid HTML 4.01!</a></li>
    <li><a href="http://www.musicip.com" style="background-image:url(jaikoz/images/connected_by_musicip.gif)">Powered by MusicIP</a></li>
    <li><a href="http://www.musicbrainz.org" style="background-image:url(jaikoz/images/poweredbymusicbrainz.png)">Powered by Musicbrainz</a></li>
  </ul>
</div>
</body>
</html>

Note that this is fluid - it adjusts for any resolution. It also is semantically meaningful, and USES NO TABLES !

Cheers
Graeme

ijabz · #5 01-24-2007, 04:37 PM

Wow, thanks for such a comprehensive answer

It basically worked, (I had to make a couple of adjustments because the size of some of my images). I think I understand the concept of only showing content/real structure in the html and keeping all the formatting in the css, but Ive never seen a list converted so radically. The only thing I feel a bit uncomfortable about with the example is the use of
font-size: 1px;
text-indent: -1000px;
it seems like a bit of a hack to me.

I take it that I should only tables when the information Im conveying is actually a table (in the MS Excel sense), unfortunately my site is full of tables so may
take a while to convert.

Centauri · #6 01-24-2007, 07:52 PM

After seeing what Eric Meyer and Stu Nicholls can do, the styling of that list was simple..

To provide text content, but have it visible as a graphic, requires the text to be removed from view somehow. I have seen the text surrounded by a span, with that span set to hidden, but I understand some screen readers won't read that. I used to just reduce it to smallest size (1px) and colour it to the same as the background, but sometimes it is still visible as a line. Whilst the text-indent method of moving the text out of view might seem like a hack, it IS valid and does work quite well.

Tabular data is what tables were originally meant for - they only got used for graphical layout when no other methods were available at the time. The beauty of the css implementation of your code is that the look of the whole site can be radically changed just by varying the style sheet. The css Zen Garden website is a great example of this.

Cheers
Graeme

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)