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="JavaS cript">

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.s rc = "Images/WorkProjects1.g if";

WorkProjects2 = new Image();
WorkProjects2.s rc = "Images/WorkProjects2.g if";

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="AngelaRen nieWebStyles.cs s" 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"><d iv align="center"> <a href="HomepageA ngela.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="Ab outMe1.src='Ima ges/AboutMe2.gif';"
onmouseout="Abo utMe1.src='Imag es/AboutMe1.gif';" >
<img name="AboutMe1" src="Images/AboutMe1.gif" border=0 width="142" height="43"></a><br>

<a href="Skills.ht m" onmouseover="Sk ills1.src='imag es/Skills2.gif';"
onmouseout="Ski lls1.src='image s/Skills1.gif';">
<img name="Skills1" src="images/Skills1.gif" border=0 width="142" height="43"></a><br>

<a href="Interests .htm" onmouseover="In terests1.src='i mages/Interests2.gif' ;"
onmouseout="Int erests1.src='im ages/Interests1.gif' ;">
<img name="Interests 1" src="images/Interests1.gif" border=0 width="142" height="43"></a><br>

<a href="WorkProje cts.htm" onmouseover="Wo rkProjects1.src ='images/WorkProjects2.g if';"
onmouseout="Wor kProjects1.src= 'images/WorkProjects1.g if';">
<img name="WorkProje cts1" src="images/WorkProjects1.g if" border=0 width="142" height="43"></a><br>

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

<a href="Contact.h tm" onmouseover="Co ntact1.src='ima ges/Contact2.gif';"
onmouseout="Con tact1.src='imag es/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"><b r>

</p></td>



<td width="647" colspan="2" valign="top"><h 1>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"><d iv align="center"> <h4>© 2007 Web Design by Angela Rennie</h4></div></td>
</tr>
</table>

</body>
</html>

Mar 26 '07 #1

Subscribe Reply

1987

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

3896

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 other browsers (I checked it under Konqueror). Thank you in advance for your help. Regards. /Mariusz <HTML>

HTML / CSS

7146

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 the span tag itself contain table tags within it? I have some scripting code and when I wrap the span in table elements it does not find the html within the span. Here is an example.... <tr><td colspan="4" align="left"><span...

Javascript

1544

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 sections, and for every enclosing tag .NET creates a runt table with nothing in it but an auto-generated ID and a link to the parent table. While I do get all of the tables I want, I also get a dozen other spurious tables like the one I described.

.NET Framework

1146

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 is no need to make individual rows visible / invisible). I always believed that tables are much more overhead than just having 1 table with lots of rows (Is that true?). So, I suggested, "Just have 1 table, and the <tr> 's we'll make...

ASP.NET

4240

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 I have a form, in which the user is required to fill in various bits of information, then laying out with a table makes it easy. A basic example...

HTML / CSS

7732

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 in an existing application already provided. I found some code on the web that works great. In this example there are 3 fixed set of tables with 3 fixed/hardcoded "id". I tried to fit this code into a FOR loop so it becomes dynamic and it would work...

Javascript

1864

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 side...most of the background I have in programming has to do with music production... The program I'm creating pulls data from an excel sheet (with defined fields) and brings them into an access database. The data being pulled is the following: ...

Microsoft Access / VBA

1442

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 each tag can have various associations. It can be associate to various posts, events and files simultaneous.

C# / C Sharp

4138

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 javascript object and that's all. No need to know CSS hacks, no need to clutter your html with tables. http://www.bravelayout.scarabeo.biz/Quickstart

HTML / CSS

9568

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9404

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10168

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8833

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7381

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6651

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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5279

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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5423

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3532

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP