Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > 2-column-layout with <table>

Reply
Thread Tools

2-column-layout with <table>

 
 
Markus.Baerlocher@lau-net.de
Guest
Posts: n/a
 
      04-22-2006
Hi,

i would like to make a I 2-column-layout with <table>.

How do i make a space between the two "columns"?

<table style="width:100%; border:1px solid #003399; ">
<tr>
<td>
<table style="width:46%; border:1px solid #003399; ">
<tr>
<td style="padding:1.5em; >
<p>content left</p>
</td>
</tr>
<tr>
<td style="padding:1.5em; >
<p>content left</p>
</td>
</tr>
</table>
<!-- space 8% - how? -->
<table style="width:46%; border:1px solid #003399; ">
<tr>
<td style="padding:1.5em; >
<p>content right</p>
</td>
</tr>
<tr>
<td style="passing:1.5em; >
<p>content right</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

Thanks,
Markus

 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      04-22-2006
To further the education of mankind, http://www.velocityreviews.com/forums/(E-Mail Removed)
vouchsafed:

> Hi,
>
> i would like to make a I 2-column-layout with <table>.
>
> How do i make a space between the two "columns"?
>
> <table style="width:100%; border:1px solid #003399; ">
> <tr>
> <td>
> <table style="width:46%; border:1px solid #003399; ">
> <tr>
> <td style="padding:1.5em; >
> <p>content left</p>
> </td>
> </tr>
> <tr>
> <td style="padding:1.5em; >
> <p>content left</p>
> </td>
> </tr>
> </table>
> <!-- space 8% - how? -->
> <table style="width:46%; border:1px solid #003399; ">
> <tr>
> <td style="padding:1.5em; >
> <p>content right</p>
> </td>
> </tr>
> <tr>
> <td style="passing:1.5em; >
> <p>content right</p>
> </td>
> </tr>
> </table>
> </td>
> </tr>
> </table>


Enclosed both tables in a <div>, float one left, the other right.

--
Neredbojias
Infinity has its limits.
 
Reply With Quote
 
 
 
 
frederick
Guest
Posts: n/a
 
      04-22-2006
(E-Mail Removed) wrote:
> i would like to make a I 2-column-layout with <table>.
>
> How do i make a space between the two "columns"?


Question: Do you really need to use tables for layout, rather than CSS?

Assuming that the answer is "yes", then you could insert a dummy table
between the other two and set its width to 8%. In other words:

..container {
border: 1px sold #003399;
}

#main {
width: 100%;
}

#left, #right {
width: 46%;
}

#dummy {
width: 8%;
}


<TABLE class="container" id="main">
<TR>
<TD>
<TABLE class="container" id="left">
<TR>

....

</TR>
</TABLE>
<TABLE id="dummy">
</TABLE>
<TABLE class="container" id="right">
<TR>

....

</TR>
</TABLE>
</TD>
</TR>
</TABLE>


By the way, your original example fails to close attribute quoting for
the following, which appears in 4 different places:
<td style="padding:1.5em; >

--
AGw.

 
Reply With Quote
 
Nije Nego
Guest
Posts: n/a
 
      04-22-2006
On 22 Apr 2006 05:36:09 -0700, (E-Mail Removed) wrote:

> Hi,
>
> i would like to make a I 2-column-layout with <table>.
>
> How do i make a space between the two "columns"?
>
> <table style="width:100%; border:1px solid #003399; ">
> <tr>
> <td>
> <table style="width:46%; border:1px solid #003399; ">
> <tr>
> <td style="padding:1.5em; >
> <p>content left</p>
> </td>
> </tr>
> <tr>
> <td style="padding:1.5em; >
> <p>content left</p>
> </td>
> </tr>
> </table>
> <!-- space 8% - how? -->
> <table style="width:46%; border:1px solid #003399; ">
> <tr>
> <td style="padding:1.5em; >
> <p>content right</p>
> </td>
> </tr>
> <tr>
> <td style="passing:1.5em; >
> <p>content right</p>
> </td>
> </tr>
> </table>
> </td>
> </tr>
> </table>
>
> Thanks,
> Markus


Sum of your tables + borders + padding is larger than 100%.

> <td style="passing:1.5em; >


Browsers will not understand this.
--
maybe later
 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      04-22-2006
> "(E-Mail Removed)" <(E-Mail Removed)> wrote:
> news:(E-Mail Removed) oups.com....
>
> Hi,
>
> i would like to make a I 2-column-layout with <table>.
>
> How do i make a space between the two "columns"?
>

[snip]

From your example I do not see any need to use tables embedded in a
table.

Looks like you could use one table with one row and 3 cells.

<!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=windows-1252">
<style type="text/css">
table,td,img{
border:1px solid #003399;
}
table{
width: 100%;
padding:0;
}
td{
padding: 0.5em;
border:1px solid #003399;
}
..tdl{
width:46%;
background-color: #87CEFA;
}
..tdr{
width:46%;
background-color:#FFFACD;
}
</style>
<title></title>
</head>
<body>
<table summary="">
<colgroup>
<col class="tdl">
<col>
<col class="tdr">
</colgroup>
<tbody>
<tr>
<td>
<p>content left</p>
<p>content left</p>
</td>
<td style="border:none;"></td>
<td>
<p>content right</p>
<p>content right</p>
</td>
</tr>
</tbody>
</table>
<p><a href="http://validator.w3.org/check?uri=referer"><img src=
"http://www.w3.org/Icons/valid-html401" "Valid HTML 4.01 Strict" height=
"31" width="88"></a> <a href=
"http://jigsaw.w3.org/css-validator/"><img src=
"http://jigsaw.w3.org/css-validator/images/vcss" alt=
"Valid CSS!"></a></p>
</body>
</html>

--
BootNic Saturday, April 22, 2006 3:05 PM

It is well known that "problem avoidance" is an important part of
problem solving. Instead of solving the problem you go upstream and
alter the system so that the problem does not occur in the first
place.
*Edward de Bono*

 
Reply With Quote
 
Jim Moe
Guest
Posts: n/a
 
      04-22-2006
(E-Mail Removed) wrote:
>
> i would like to make a 2-column-layout with <table>.
> How do i make a space between the two "columns"?
>

Apply either margin or padding to one or both of the tables.
table-left { padding-right: 8%; } - or use margin-...
or
table-right { padding-left: 8%; }
or
table-left { padding-right: 4%; }
table-right { padding-left: 4%; }

Your code snippet implies that you are using tables for general layout.
Search for "2 column layout" to find modern methods for designing for the WWW.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
 
Reply With Quote
 
Markus.Baerlocher@lau-net.de
Guest
Posts: n/a
 
      04-24-2006
Dear css-Professionals,

thanks a lot for your advices! (and sorry for my switzerland-english)

In the last days I read (and understand) a lot about the advantages of
CSS.
It is easy to split content and style by calling style.css in <head>.
Unfortunately my .php doesn't have a "<head>"...

The story behind:
I use a BIG open-source-prog for genealogy.
I try to append it to a "small CMS" (for this I need the
"2-column-layout").
Of corse it will be VERY much better with css!

But in the .php which does my things, there is no <head> where I could
link-in the .css
Alternatively I tried this "table-working-around".

I now something about HTML, and now a little about CSS - but nothing
about PHP.
I use the given content.php, and customyse it after:

echo <<<TEXT

with some HTML-code.

This is bevore "echo <<<TEXT":
----------------------------------
<?php

//----- Globale Einstellungen ( wird f&uuml;r Anzeige ben&ouml;tigt!)
------//
require("config.php");
require("includes/functions_charts.php");
require($PGV_BASE_DIRECTORY.$factsfile["english"]);
if (file_exists($PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE])) require
$PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE];

// -- print html header information
print_header($name." ".$pgv_lang["descend_chart"]);
if (strlen($name)<30) $cellwidth="100%";
else $cellwidth=(strlen($name)*14);
print "\n\t<table class=\"list_table, $TEXT_DIRECTION\"><tr><td
width=\"${cellwidth}px\" valign=\"top\">\n\t\t";
// print "\n\t<h2>".$pgv_lang["descend_chart"].":<br
/>".PrintReady($name)."</h2>";

//----- HTML- content ----------------//
echo <<<TEXT
------------------------------------------
(which I desn't understand - but it works)

I put in this content.php my HTML, including all local style-formats.
For every new content, I repeate the whole PHP- and CSS-stuff around in
many content.php's.
Then I call the content.php's by a menu.php: $submenu["link"] =
"1th-content.php";

Of corse, the best way is to split:
- XHTML-content (a lot of pages)
- style.css
- display.php to call the content and the style

and in the menu.php I call the display.php with a parameter for the
specific content.html

But I have no idea HOW to do this...

Thanks a lot for your support!
Markus

if you will have a look:
http://www.lau-net.de/baerlocher/php..._HTML-Test.php

 
Reply With Quote
 
Martin Edwards
Guest
Posts: n/a
 
      04-25-2006
(E-Mail Removed) wrote:
> Dear css-Professionals,
>
> thanks a lot for your advices! (and sorry for my switzerland-english)
>
> In the last days I read (and understand) a lot about the advantages of
> CSS.
> It is easy to split content and style by calling style.css in <head>.
> Unfortunately my .php doesn't have a "<head>"...
>
> The story behind:
> I use a BIG open-source-prog for genealogy.
> I try to append it to a "small CMS" (for this I need the
> "2-column-layout").
> Of corse it will be VERY much better with css!
>
> But in the .php which does my things, there is no <head> where I could
> link-in the .css
> Alternatively I tried this "table-working-around".
>
> I now something about HTML, and now a little about CSS - but nothing
> about PHP.
> I use the given content.php, and customyse it after:
>
> echo <<<TEXT
>
> with some HTML-code.
>
> This is bevore "echo <<<TEXT":
> ----------------------------------
> <?php
>
> //----- Globale Einstellungen ( wird f&uuml;r Anzeige ben&ouml;tigt!)
> ------//
> require("config.php");
> require("includes/functions_charts.php");
> require($PGV_BASE_DIRECTORY.$factsfile["english"]);
> if (file_exists($PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE])) require
> $PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE];
>
> // -- print html header information
> print_header($name." ".$pgv_lang["descend_chart"]);
> if (strlen($name)<30) $cellwidth="100%";
> else $cellwidth=(strlen($name)*14);
> print "\n\t<table class=\"list_table, $TEXT_DIRECTION\"><tr><td
> width=\"${cellwidth}px\" valign=\"top\">\n\t\t";
> // print "\n\t<h2>".$pgv_lang["descend_chart"].":<br
> />".PrintReady($name)."</h2>";
>
> //----- HTML- content ----------------//
> echo <<<TEXT
> ------------------------------------------
> (which I desn't understand - but it works)
>
> I put in this content.php my HTML, including all local style-formats.
> For every new content, I repeate the whole PHP- and CSS-stuff around in
> many content.php's.
> Then I call the content.php's by a menu.php: $submenu["link"] =
> "1th-content.php";
>
> Of corse, the best way is to split:
> - XHTML-content (a lot of pages)
> - style.css
> - display.php to call the content and the style
>
> and in the menu.php I call the display.php with a parameter for the
> specific content.html
>
> But I have no idea HOW to do this...
>
> Thanks a lot for your support!
> Markus
>
> if you will have a look:
> http://www.lau-net.de/baerlocher/php..._HTML-Test.php
>

Verdammt! Kompliziert, na?

--
You can't fool me: there ain't no Sanity Clause - Chico Marx

www.geocities.com/Athens/Agora/1955
 
Reply With Quote
 
Markus.Baerlocher@lau-net.de
Guest
Posts: n/a
 
      04-27-2006
Please, who may tell me, how it works to build in a special.css in my
..php who does not have something like <head>?

thanks a lot!
Markus

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off




Advertisments