convert table to CSS

Hi!

I would greatly appreciate specific help in converting this HTML table to CSS rules.
Also, the table is currently horizontally centered on the page.
TIA

<table border="0" width="450">
     <tr align="left">
          <td>
            <ul>
               <li>H-Sphere Control Panel</li>
               <li>Webalizer and AWStats</li>
               <li>FrontPage Extensions</li>
               <li>Site Studio Site Creator</li>
               <li>Webmail</li>
               <li>Email Virus Scan and SpamAssassin</li>
               <li>Subdomains</li>
               <li>Daily Backups</li>
            </ul>
          </td>
          <td>
            <ul>
               <li>Autoresponders</li>
               <li>Email Aliases</li>
               <li>XML</li>
               <li>Databases
               <ul>
                    <li>Microsoft Access</li>
                    <li>MSSQL</li>
                    <li>MySQL</li>
                    <li>and so <u>much more</u>.</li>
               </ul>
            </ul>
          </td>
     </tr>
</table>
TrueBlueAsked:
Who is Participating?
 
Gurvinder Pal SinghCommented:
try
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>

<BODY>
	<div style='width:450px'>
		<div style='float:left'>
            <ul>
				<li>H-Sphere Control Panel</li>
				<li>Webalizer and AWStats</li>
				<li>FrontPage Extensions</li>
				<li>Site Studio Site Creator</li>
				<li>Webmail</li>
				<li>Email Virus Scan and SpamAssassin</li>
				<li>Subdomains</li>
				<li>Daily Backups</li>
            </ul>
		</div>
		<div style='float:left'>
            <ul>
               <li>Autoresponders</li>
               <li>Email Aliases</li>
               <li>XML</li>
               <li>Databases
               <ul>
                    <li>Microsoft Access</li>
                    <li>MSSQL</li>
                    <li>MySQL</li>
                    <li>and so <u>much more</u>.</li>
               </ul>
            </ul>
		</div>
	</table>
</BODY>
</HTML>

Open in new window

0
 
Adesso21Commented:
This should do the trick
<style>
	ul {
		float:left;
		padding : 0 0 0 1em;
	}
	div {
		width : 450px;
		margin-left: auto;
		margin-right: auto;
	}
</style>
<div>
	<ul>
		<li>H-Sphere Control Panel</li>
		<li>Webalizer and AWStats</li>
		<li>FrontPage Extensions</li>
		<li>Site Studio Site Creator</li>
		<li>Webmail</li>
		<li>Email Virus / SPAM</li>
		<li>Subdomains</li>
		<li>Daily Backups</li>
	</ul>
	<ul>
		<li>Autoresponders</li>
		<li>Email Aliases</li>
		<li>XML</li>
		<li>Databases
		<ul style="float:none;">
			<li>Microsoft Access</li>
			<li>MSSQL</li>
			<li>MySQL</li>
			<li>and so <u>much more</u>.</li>
		</li>
	</ul>
</div>

Open in new window


a note or two to add.

If you want to hard-code the width, then you can't have text that is longer than the width you specify, I shortened the Spamassasin text a bit....

Dont't forget to always close the tags you open, in this case it was a missing li

The beauty of making it this way is that your content now has no styles, so if you want to change the layout in future, you don't have to change the list HTML at all, only the CSS. If you make this load from a external file, even better :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.