Creating tables with DIV tags

24 New Member

I want to convert my website tables layout to div tags as someone told me its easier to make changes etc etc I just need some help in getting started with this and what to put in the stylesheet. the code below is how it looks just now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Angela Home Page</title>

<SCRIPT LANGUAGE="JavaScript">

AboutMe1 = new Image();
AboutMe1.src = "Images/AboutMe1.gif";

AboutMe2 = new Image();
AboutMe2.src = "Images/AboutMe2.gif";

Skills1 = new Image();
Skills1.src = "Images/Skills1.gif";

Skills2 = new Image();
Skills2.src = "Images/Skills2.gif";

Interests1 = new Image();
Interests1.src = "Images/Interests1.gif";

Interests2 = new Image();
Interests2.src = "Images/Interests2.gif";

WorkProjects1 = new Image();
WorkProjects1.src = "Images/WorkProjects1.gif";

WorkProjects2 = new Image();
WorkProjects2.src = "Images/WorkProjects2.gif";

Links1 = new Image();
Links1.src = "Images/Links1.gif";

Links2 = new Image();
Links2.src = "Images/Links2.gif";

Contact1 = new Image();
Contact1.src = "Images/Contact1.gif";

Contact2 = new Image();
Contact2.src = "Images/Contact2.gif";

</script>

<link href="AngelaRennieWebStyles.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="c8c8c8">

<table border="0" width="821" height="170" cellpadding="10" align="center">
<tr>
<td colspan="3" valign="top"><div align="center"><a href="HomepageAngela.htm"><img src="Images/Main-Banner.gif" width="821 height=" border="0"170"></a></div></td>
</tr>
<tr>

<td width="152" valign="top">


<p><a href="About.htm" onmouseover="AboutMe1.src='Images/AboutMe2.gif';"
onmouseout="AboutMe1.src='Images/AboutMe1.gif';">
<img name="AboutMe1" src="Images/AboutMe1.gif" border=0 width="142" height="43"></a><br>

<a href="Skills.htm" onmouseover="Skills1.src='images/Skills2.gif';"
onmouseout="Skills1.src='images/Skills1.gif';">
<img name="Skills1" src="images/Skills1.gif" border=0 width="142" height="43"></a><br>

<a href="Interests.htm" onmouseover="Interests1.src='images/Interests2.gif';"
onmouseout="Interests1.src='images/Interests1.gif';">
<img name="Interests1" src="images/Interests1.gif" border=0 width="142" height="43"></a><br>

<a href="WorkProjects.htm" onmouseover="WorkProjects1.src='images/WorkProjects2.gif';"
onmouseout="WorkProjects1.src='images/WorkProjects1.gif';">
<img name="WorkProjects1" src="images/WorkProjects1.gif" border=0 width="142" height="43"></a><br>

<a href="Links.htm" onmouseover="Links1.src='images/Links2.gif';"
onmouseout="Links1.src='images/Links1.gif';">
<img name="Links1" src="images/Links1.gif" border=0 width="142" height="43"></a><br>

<a href="Contact.htm" onmouseover="Contact1.src='images/Contact2.gif';"
onmouseout="Contact1.src='images/Contact1.gif';">
<img name="Contact1" src="images/Contact1.gif" border=0 width="142" height="43"></a></p>
<p><img src="Images/Square.gif" width="142" height="142"><br>

</p></td>



<td width="647" colspan="2" valign="top"><h1>Home></h1>
<h5>Welcome </h5>
<p>Home to my personal website and online portfolio, where you can find out all about me, my interests, work and projects that I have done. </p>
<p>Have a browse around and feel free to drop me a line via the contact section if you want to get in touch.</p>
<p>  </p></td>
</tr>
<tr>
<td colspan="3" valign="top"><div align="center"><h4>© 2007 Web Design by Angela Rennie</h4></div></td>
</tr>
</table>

</body>
</html>

Mar 26 '07 #1

Subscribe Reply

1973

drhowarddrfine

7,435

Recognized Expert Expert

The idea of the <div> tag is not to replicate tables but to aid in structuring a html document. Tables were never intended to be used for page layout and shouldn't anymore. So you need to move away from the concept of needing to lay everything out in a grid unless, of course, that is the look you need.

I have to leave for an hour or so but I'll look at this then.

Mar 26 '07 #2

drhowarddrfine

7,435

Recognized Expert Expert

And sometimes you don't need divs at all. I don't have the images so I didn't try centering anything and I can't tell if this looks exactly how you want it but it should be close. (And, no, I didn't go to the store yet :) )

Expand|Select|Wrap|Line Numbers

 <!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>Angela Home Page</title>
 
<style type="text/css">

    body{

        background-color:#c8c8c8;

    }

    img{

        width:142px;

        height:43px;

    }

    #banner{

        width:821px;

        height:170px;

    }

</style>

</head>

<body>

<p id="banner">

    <a href="HomepageAngela.htm">

        <img src="Images/Main-Banner.gif">

    </a>

</p>
 
<!-- Buttons -->

<p><a href="About.htm" onmouseover="AboutMe1.src='Images/AboutMe2.gif';"

onmouseout="AboutMe1.src='Images/AboutMe1.gif';">

<img name="AboutMe1" src="Images/AboutMe1.gif"></a><br>
 
<a href="Skills.htm" onmouseover="Skills1.src='images/Skills2.gif';"

onmouseout="Skills1.src='images/Skills1.gif';">

<img name="Skills1" src="images/Skills1.gif"></a><br>
 
<a href="Interests.htm" onmouseover="Interests1.src='images/Interests2.gif';"

onmouseout="Interests1.src='images/Interests1.gif';">

<img name="Interests1" src="images/Interests1.gif"></a><br>
 
<a href="WorkProjects.htm" onmouseover="WorkProjects1.src='images/WorkProjects2.gif';"

onmouseout="WorkProjects1.src='images/WorkProjects1.gif';">

<img name="WorkProjects1" src="images/WorkProjects1.gif"></a><br>
 
<a href="Links.htm" onmouseover="Links1.src='images/Links2.gif';"

onmouseout="Links1.src='images/Links1.gif';">

<img name="Links1" src="images/Links1.gif"></a><br>
 
<a href="Contact.htm" onmouseover="Contact1.src='images/Contact2.gif';"

onmouseout="Contact1.src='images/Contact1.gif';">

<img name="Contact1" src="images/Contact1.gif"></a></p>

<p><img src="Images/Square.gif">
 
</p>
 
<h1>Home&gt;</h1>

<h5>Welcome </h5>

<p>Home to my personal website and online portfolio, where you can find out all about me, my interests, work and projects that I have done. </p>

<p>Have a browse around and feel free to drop me a line via the contact section if you want to get in touch.</p>
 
<h4>&copy; 2007 Web Design by Angela Rennie</h4>
 
</body>

</html>

Mar 26 '07 #3

Similar topics

Opera 7.23 doesn't show me inner tables

by: Mariusz Jedrzejewski | last post by:

Hi, I'll be very grateful if somebody can explain me why my Opera 7.23 (runing under linux) doesn't show me inner tables. Using below code I can see only "inner table 1". There is no problem with...

HTML / CSS

what's the deal with the span tag and tables tags?

by: developer | last post by:

Does anyone know what is the way IE treats span tags(<span>) and table tags(<tr>, <td>)? Should the <span> tag be encolsed in tds and trs if it placed with other elements that are in a table? Can...

Javascript

Eliminating extra tables during XSD to DataSet conversion

by: Bruce Wood | last post by:

Converting an XML schema to a DataSet is very easy under .NET. However, the DataSets that I get after the conversion is done are rather messy. The problem is that the schema is organized into...

.NET Framework

12 tables on aspx page: A performance hit?

by: Jason Shohet | last post by:

Someone in my group created an aspx with 12 tables on it, each with several rows in the table. In codebehind, we often make 1 or more tables visible / invisible. (However within each table, there...

ASP.NET

When are tables appropriate, and when are they not?

by: Alan Silver | last post by:

Hello, I understand the issue that tables should be used for tabular data and not for layout, but I would like some clarification as to exactly what constitutes tabular data. For example, if...

HTML / CSS

Dynamic Collapsible Tables for any number of tables

by: mht7 | last post by:

I'm newbie to javascript and I did an extensive search on this site and couple of others looking for directions. I'm attempting to write some custom javascript for collapsing the tables and fit it...

Javascript

Creating relationships with imported data - Please help I'm a newbie

by: Kosmos | last post by:

Hey :) hopefully someone can help me with this...I decided to take on the task of programming an access database for my legal co-op/internship...I'm studying law and music production on the...

Microsoft Access / VBA

LINQ. Which tables relationships should I use?

by: shapper | last post by:

Hello, I need an advice: I have 3 tables: Posts, Events and Files. Each post, event and file can be a associated to one or many tags. My idea was to create only one Tags table. Note that...

C# / C Sharp

No TABLES in html. No hacks in CSS. Any layout possible, crossbrowser. Try it.

by: brave1979 | last post by:

Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in...

HTML / CSS

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp