Table to CSS

[Jay]

I am trying to get rid of tables on my website that are not used for tabular
data. I have one table that holds a menu selection as such:

<table width="100%">
<tr>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
</tr>
</table>

I would like to use CSS to position these elements in the same fashion as
above.

Any tips?

 

[Kris]

I am trying to get rid of tables on my website that are not used for tabular
data. I have one table that holds a menu selection as such:

<table width="100%">
<tr>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
</tr>
</table>

I would like to use CSS to position these elements in the same fashion as
above.

Any tips?

<ul id="navigation">
<li>Menu Item</li>
....
</ul>

#navigation li {
float: left;
width: 16%;
}

That's the basic setup.

 

[Stephen]

In Jay <[email protected]> expounded:
| I am trying to get rid of tables on my website that are not used for
| tabular data. I have one table that holds a menu selection as such:
|
| <table width="100%">
| <tr>
| <td width="16%">Menu Item</td>
| <td width="16%">Menu Item</td>
| <td width="16%">Menu Item</td>
| <td width="16%">Menu Item</td>
| <td width="16%">Menu Item</td>
| <td width="16%">Menu Item</td>
| </tr>
| </table>
|
| I would like to use CSS to position these elements in the same
| fashion as above.
|
| Any tips?

This would do it. You can adjust the padding f necessary to make the display
what you want.

 

[Toby Inkster]

I would like to use CSS to position these elements in the same fashion as
above.

http://examples.tobyinkster.co.uk/css-rollovers.html

 

[Stephen]

In Stephen <[email protected]> expounded:
| In | Jay <[email protected]> expounded:
|| I am trying to get rid of tables on my website that are not used for
|| tabular data. I have one table that holds a menu selection as such:
||
|| <table width="100%">
|| <tr>
|| <td width="16%">Menu Item</td>
|| <td width="16%">Menu Item</td>
|| <td width="16%">Menu Item</td>
|| <td width="16%">Menu Item</td>
|| <td width="16%">Menu Item</td>
|| <td width="16%">Menu Item</td>
|| </tr>
|| </table>
||
|| I would like to use CSS to position these elements in the same
|| fashion as above.
||
|| Any tips?
|

This would do it. You can adjust the padding if necessary to make the
display what you want.

<div align="center">
<a href="2001.shtml" style="padding-right:2em">2001 articles</a>
<a href="2002.shtml" style="padding-right:2em">2002 articles</a>
<a href="back.shtml" style="padding-right:2em">background images</a>
<a href="empath.shtml" style="padding-right:2em">empathic journey</a>
<a href="guest.shtml" target="_blank"
style="padding-right:2em">guestbook</a>
<a href="index.shtml">home</a>
</div>

 

[Mitja]

I am trying to get rid of tables on my website that are
not used for tabular data. I have one table that holds a
menu selection as such:

<table width="100%">
<tr>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
</tr>
</table>

I would like to use CSS to position these elements in the
same fashion as above.

Any tips?

What Kris suggested. Note, however, that CSS doesn't mean saying no to
tables. You can leave the table as it is and style it with CSS. This is
better than what you have (more flexible), though still not as good as the
floating version (which is semantically more suggestive, since it's a _list_
of links you have)

 

[Webcastmaker]

I am trying to get rid of tables on my website that are not used for tabular
data.

Use this knowledge wisely.

I have one table that holds a menu selection as such:
<table width="100%">
<tr>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
<td width="16%">Menu Item</td>
</tr>
</table>

I would like to use CSS to position these elements in the same fashion as
above.
Any tips?

Use an UL for the menu.

http://www.moronicbajebus.com/playground/cssplay/hormenu/

Google "UL horizontal menu CSS" for more samples