2-column-layout with <table>

M

Markus.Baerlocher

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
 
N

Neredbojias

To further the education of mankind, (e-mail address 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>
Click to expand...

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

frederick

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

How do i make a space between the two "columns"?
Click to expand...

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; >
 
N

Nije Nego

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
Click to expand...

Sum of your tables + borders + padding is larger than 100%.
<td style="passing:1.5em; >
Click to expand...

Browsers will not understand this.
 
B

BootNic

[email protected] said:
Hi,

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

How do i make a space between the two "columns"?
Click to expand...
[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*
 
J

Jim Moe

i would like to make a 2-column-layout with <table>.
How do i make a space between the two "columns"?
Click to expand...
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.
 
M

Markus.Baerlocher

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/phpGedView/z_HTML-Test.php
 
M

Martin Edwards

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/phpGedView/z_HTML-Test.php
Click to expand...
Verdammt! Kompliziert, na?
 
M

Markus.Baerlocher

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Having trouble centering contents of td ? 3
How to wrap <td> content . 16
SendGrid email issue in responsive Gmail 1
Help needed with thank you message 5
Image shifts to the right when export the page to pdf 4
Filter table rows based on multiple checkboxes value 2
Help with my responsive home page 2

Members online

Total: 25 (members: 1, guests: 24)
Robots: 555

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top