Tidying up my table

HTML & CSS
1

I have a table here: Microsoft Access Video Tutorials | Access World

I would like to have each row with the links in them closer together. They seem a bit spread out.

Also, I want the left image icon lined up with the text a little better.

How can I do that?

Thanks,

Jon

2

Hi,

It’s probably the bottom margin on your image class. Remove the bottom margin.


img.alignleft {
  display: inline;
  padding: 0;
[B]margin:0 10px 0 0;[/B]
}

I’m not sure a table is the correct choice for that content and I would probably have used a DL list.

You should tidy up the inline styles and deprecated attributes you are using anyway. Use classes for the alternate colours and not inline styles. I’m not quite sure why you have those empty rows in there either.

3

I’m with Paul in that I’m not sure that really qualifies as tabular data – though I don’t think I’d be abusing a definition list for it either since I don’t see terms and definitions… A regular unordered list with a span for the runtime should be more than enough…

to go through your code one bit at a time…


<table style="width: 461px; height: 963px;" border="0" cellpadding="1">

Using the style atttribute inline like that basically misses the point of CSS – likewise I wouldn’t bother with cellpadding or declaring border since you could just use:

td { padding:1px; }
table { border-collapse:collapse; border:0; }

…in your css.


<tbody>

Since you aren’t using thead, there’s no real reason to state tbody.


<tr style="background-color: #f8f7f6;">
<td colspan="3"><strong>General Tips<br />
</strong></td>
</tr>

Again, a pointless bandwidth wasting style attribute, you’ve got a line-break for no reason, and given the use of colspan and strong that shouldn’t be STRONG, that should be a TH.


<td style="width: 25px; height: 18px;"><a href="http://www.sitepoint.com/forums/wp-content/uploads/2011/06/camera-icon.gif"><img class="alignleft" title="camera-icon" src="http://www.sitepoint.com/forums/wp-content/uploads/2011/06/camera-icon.gif" alt="" width="17" height="17" /></a></td>

Waste of code applying that style to every TD like that, that’s what classes are for, that’s a presentational image so Iprobably wouldn’t even have that in the markup… the anchor I’m not even certain why it’s in there since it’s just a link to the icon (?!?)…


<td><a href="http://www.access-programmers.co.uk/?p=297">Tips for organising the database window</a></td>
<td>01:04</td>

This isn’t too bad, it’s really the only part I’d feel justified in using a table on as yes, it has rows and columns.


<tr>
<td></td>
<td></td>
<td></td>
</tr>

While this is just a waste of bandwidth for christmas only knows what.

That said, I’d probably code those thus:


<div class="videoLists">

	<h3>General Tips</h3>
	<ul>
		<li>
			<a href="/?p=297">
				Tips for organising the database window
			</a> 01:04
		</li>
	</ul>
	
	<h3>Tables</h3>
	<ul>
		<li>
			<a href="/microsoft-access/tables/how-to-create-a-simple-table/">
				How to create a simple Table
			</a> 05:58
		</li><li>
			<a href="/?p=272">
				How to create a relationship between 2 tables
			</a> 05:26
		</li>
	</ul>
	
	<h3>Queries</h3>
	<ul>
		<li>
			<a href="/microsoft-access/queries/how-to-create-a-simple-query/">
				How to create a simple Query
			</a> 06:43
		</li>
	</ul>
	
<!-- .videoLists --></div>

with this in your EXTERNAL stylesheet.


.videoLists h3 {
	padding:0.5em;
	font:bold 100%/140% arial,helvetica,sans-serif;
	background:#F8F7F6;
}

.videoLists ul {
	list-style:none;
}

.videoLists li {
	overflow:hidden; /* wrap floats */
	height:1%; /* holly hack, trip haslayout, wrap floats IE */
	padding:0.5em 0;
	text-align:right; /* moves date to right side next to floated anchor */
	background:url(/wp-content/uploads/2011/06/camera-icon.gif) center left no-repeat;
}

.videoLists li a {
	float:left;
	display:inline; /* prevent IE margin bugs */
	margin-left:17px; /* image width */
	padding:0 1em 0 0.5em; 
}

I might even consider adding <span>-</span> after each </a> with .videoLists li span { display:none; } in the CSS to add a divider that only shows up for non-CSS users. Graceful degradation and all that.

Hey, for once I didn’t rant and rave about all the garbage markup turdpress saddled you with that you really should take the time to rip out by the …

4

lol :slight_smile:

5

Thanks for all the suggestions - very nicely detailed. But here is the problem…

My knowledge of html is okish and css less so. I’ve no idea of the implications of meddling with the external css using the theme I have for Wordpress. When I update the theme, it may knock out stuff. For that reason, I am thinking either some html commands or inline styles. Yes, not as efficient and nice and smooth, but at least it gets the job done.

I know you guys are perfectionists but for me, I need to bodge it to get it done!

6

Is there a semi-colon missing from this?

<table style=“width: 461px; height: 963px;” border=“0” cellpadding=“1”>

7

I don’t think so! It’s only the bit I’ve coloured green that is part of the style attribute. The border and cellpadding, although presentational, are often specified in the HTML because they’re a pain in the wossname to do reliably, cross-browser, in CSS. Because they’re regular HTML attributes, not CSS, they don’t need semi-colons.