Tabelle

Kevin · 04.11.2007, 23:59

Hallo Leute!
Ich habe folgende Tabelle:

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="20%"></td>
<td width="80%"></td>
</tr>
</table>

Wie ihr sehen könnt hat die Tabelle zwei Spalten.
Jetzt zu meinem Problem. Ich möchte das die erste hälfte der Tabelle mit 20% eine feste Größe bekommt z.B. 150 pixel und der zweite Teil 100% von dem rest der seite. Also der erste Teil darf sich von der breite nicht verändern egal wie eng oder breit die seite wird. Und die andere seite der tabelle muß sich immer der Seite anpassen.

Geht das irgendwie?

Danke fürs lesen!

Zergling-new · 05.11.2007, 00:25

Es ist unüblich Pixel- mit Prozentwerten zu kombinieren, aber du kannst es zumindest versuchen:

Code:

<table style="width:100%">
<tr>
<td style="width:150px">..</td>
<td>..</td>
</tr>
</table>

Bei neueren Browsern sollte das klappen.
Beachte, dass Tabellen nicht mehr zum Layouten verwendet werden sollten, sondern wirklich nur für die tabellarische Darstellung.

Falls du deine Seite damit layouten möchtest, mach dich im Internet mit "3-Spalten-Layout" vertraut. Weiter könnte diese Seite interessant sein:
http://www.yaml.de/
Beachte die Lizenz.

Curanai · 05.11.2007, 00:44

Code:

<style type="text/css">
<!--
body 
{
 font-family:Verdana;
 font-size:12px;
 background-color:#ffefde;
}
h1 {font-size:18px;color:#000000;margin-bottom:0px;}
h2 {font-size:16px;color:#000000;}
h3 {font-size:14px;color:#000000;}
p {margin-top:0px;}

code {font-size:14px;color:#0000ff;}
pre
{
 font-size:14px;
 color:#0000ff;
 padding:5px;
}
a:link, a:visited, a:active, a:hover
{ 
  text-decoration:none;
  font-weight:bold;
  color:#634142;
  font-size:12px;
}
a:active, a:hover
{ 
 text-decoration:underline;
}

#title {
height:34px;
padding:5px;
border-bottom:1px solid #000000;
margin-bottom:20px;
}
#left {
width:14%;
float:left;
line-height:18px;
}
.menutitle
{
font-weight:bold;
border-top:1px dashed #000000;
margin-top:15px;
}

#content {
width:80%;
float:right;
}
//-->
</style>

... weiter geht's ...

Code:

<body>
<div id="title">
   <h1>Zweispaltiges Layout, 100% breit</h1>
</div>
<div id="left" style="clear:right;">
<p class="menutitle">MENU 1</p>
&raquo; HYPERLINK 1

&raquo; HYPERLINK 2

&raquo; HYPERLINK 3

&raquo; HYPERLINK 4

&raquo; HYPERLINK 5


<p class="menutitle">MENU 2</p>
&raquo; HYPERLINK 1

&raquo; HYPERLINK 2

&raquo; HYPERLINK 3

&raquo; HYPERLINK 4

&raquo; HYPERLINK 5


<p class="menutitle">MENU 3</p>
&raquo; HYPERLINK 1

&raquo; HYPERLINK 2

&raquo; HYPERLINK 3

&raquo; HYPERLINK 4

&raquo; HYPERLINK 5

</div>

<div id="content"></div>

Erklärung
Dieses Beispiel teilt sich in drei Bereiche auf: Titelleiste, Menü und der Inhalt

Die Titelleiste
Für die Titelleiste habe ich einen <div>-Container verwendet,
da der gesamte Bereich mit einem unteren Rahmen versehen werden soll und es mit zwei nebeneinander floatenden Elementen nicht immer möglich ist
einen lückenlosen Rahmen zu erzeugen.

Das Logo und das <h1>-Tag floaten nebeneinander.

Das Menü
Das Menü ist ebenfalls in einem <div>-Container eingefügt, der mit den folgenden Stylesheets formatiert ist:
width:14%;
float:left;
line-height:18px;

Die Breite ist auf 14% festgelegt und die Zeilenhöhe sorgt für etwas Abstand unter den Hyperlinks im Menü.

Die Eigenschaft float plaziert Elemente auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem <div>-Container für das Menü float:left zugewiesen, um ihn linksbündig auf der Seite auszurichten und den nachfolgenden Inhalt rechts vorbeifließen zu lassen.

Inhalt
Deshalb ist für den Inhalt, genauer gesagt für den <div>-Container des Inhalts,
float:right angegeben, um ihn rechtsbündig neben dem Menü auszurichten. Weiterhin ist die Breite auf 82% festgelegt. Rechnet man die 12% vom Menü dazu, bleiben 6% als horizontaler Abstand zwischen beiden Bereichen übrig. Das ist alles.

Achtung: Wird der linke Bereich zu klein, schraubt der sich natürlich auch runter - sprich: wird kleiner! Ich stimme dem Zergling zu, dass man Größenangaben NICHT mischen soll.

Schönen Start in die Woche.

Papst · 05.11.2007, 01:41

p.s. es bieten sich list-elemente für deine Menüs an.

Curanai · 05.11.2007, 10:23

Sorry, die Macht des Copy/Paste ging da mit mir durch ... *g*

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Zeilenanzahl einer tabelle mit WHERE aber ohne schleife?	sovereign	Datenbanken	13	17.04.2006 20:34
[Erledigt] Problem mit dem Füllen einer Tabelle über Formular		PHP Tipps 2006	18	10.01.2006 12:51
Problem mit Anzeige einer Tabelle mit dem Firefox?		HTML, Usability und Barrierefreiheit	8	28.11.2005 15:08
[Erledigt] Tabelle aktualisieren		Datenbanken	3	23.11.2005 09:54
[Erledigt] Problem mit mySQL		Datenbanken	7	27.09.2005 12:06
[Erledigt] mysql abfrage über 4 Tabelle - bis 3 geht, bei der 4. habert		Datenbanken	2	08.09.2005 11:59
tabelle in tabelle ohne aussenrand	noskule	HTML, Usability und Barrierefreiheit	6	25.08.2005 14:17
Tabelle im DIV-Container zentrieren		HTML, Usability und Barrierefreiheit	1	21.04.2005 22:28
Tabelle in Tabelle ausrichten		HTML, Usability und Barrierefreiheit	7	03.01.2005 14:32
Auslesen mySQL tabelle und ausgabe als html	Calli	PHP Tipps 2004-2	3	21.12.2004 16:51
[Erledigt] Ganze Tabelle ausgeben		PHP Tipps 2004-2	1	21.11.2004 16:48
[Erledigt] Tabelle in Tabelle automatisch anpassen		HTML, Usability und Barrierefreiheit	3	04.11.2004 21:37
[Erledigt] Letzter Eintrag in einer Tabelle und Top Five einer Tabelle		Datenbanken	2	27.09.2004 06:50
Sortieren anhand einer zweiten Tabelle		PHP Tipps 2004	6	20.09.2004 09:03
HILFE: Column count doesn't match value count at row 1		Datenbanken	17	12.06.2004 16:45

04.11.2007, 23:59
Kevin Benutzer Registriert seit: 23.09.2005 Beiträge: 33	Tabelle Hallo Leute! Ich habe folgende Tabelle: <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1"> <tr> <td width="20%"></td> <td width="80%"></td> </tr> </table> Wie ihr sehen könnt hat die Tabelle zwei Spalten. Jetzt zu meinem Problem. Ich möchte das die erste hälfte der Tabelle mit 20% eine feste Größe bekommt z.B. 150 pixel und der zweite Teil 100% von dem rest der seite. Also der erste Teil darf sich von der breite nicht verändern egal wie eng oder breit die seite wird. Und die andere seite der tabelle muß sich immer der Seite anpassen. Geht das irgendwie? Danke fürs lesen!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

05.11.2007, 00:25
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Es ist unüblich Pixel- mit Prozentwerten zu kombinieren, aber du kannst es zumindest versuchen: Code: <table style="width:100%"> <tr> <td style="width:150px">..</td> <td>..</td> </tr> </table> Bei neueren Browsern sollte das klappen. Beachte, dass Tabellen nicht mehr zum Layouten verwendet werden sollten, sondern wirklich nur für die tabellarische Darstellung. Falls du deine Seite damit layouten möchtest, mach dich im Internet mit "3-Spalten-Layout" vertraut. Weiter könnte diese Seite interessant sein: http://www.yaml.de/ Beachte die Lizenz.

05.11.2007, 00:44
Curanai Erfahrener Benutzer Registriert seit: 13.05.2006 Beiträge: 466	Code: <style type="text/css"> <!-- body { font-family:Verdana; font-size:12px; background-color:#ffefde; } h1 {font-size:18px;color:#000000;margin-bottom:0px;} h2 {font-size:16px;color:#000000;} h3 {font-size:14px;color:#000000;} p {margin-top:0px;} code {font-size:14px;color:#0000ff;} pre { font-size:14px; color:#0000ff; padding:5px; } a:link, a:visited, a:active, a:hover { text-decoration:none; font-weight:bold; color:#634142; font-size:12px; } a:active, a:hover { text-decoration:underline; } #title { height:34px; padding:5px; border-bottom:1px solid #000000; margin-bottom:20px; } #left { width:14%; float:left; line-height:18px; } .menutitle { font-weight:bold; border-top:1px dashed #000000; margin-top:15px; } #content { width:80%; float:right; } //--> </style> ... weiter geht's ... Code: <body> <div id="title"> <h1>Zweispaltiges Layout, 100% breit</h1> </div> <div id="left" style="clear:right;"> <p class="menutitle">MENU 1</p> » HYPERLINK 1 » HYPERLINK 2 » HYPERLINK 3 » HYPERLINK 4 » HYPERLINK 5 <p class="menutitle">MENU 2</p> » HYPERLINK 1 » HYPERLINK 2 » HYPERLINK 3 » HYPERLINK 4 » HYPERLINK 5 <p class="menutitle">MENU 3</p> » HYPERLINK 1 » HYPERLINK 2 » HYPERLINK 3 » HYPERLINK 4 » HYPERLINK 5 </div> <div id="content"></div> Erklärung Dieses Beispiel teilt sich in drei Bereiche auf: Titelleiste, Menü und der Inhalt Die Titelleiste Für die Titelleiste habe ich einen <div>-Container verwendet, da der gesamte Bereich mit einem unteren Rahmen versehen werden soll und es mit zwei nebeneinander floatenden Elementen nicht immer möglich ist einen lückenlosen Rahmen zu erzeugen. Das Logo und das <h1>-Tag floaten nebeneinander. Das Menü Das Menü ist ebenfalls in einem <div>-Container eingefügt, der mit den folgenden Stylesheets formatiert ist: width:14%; float:left; line-height:18px; Die Breite ist auf 14% festgelegt und die Zeilenhöhe sorgt für etwas Abstand unter den Hyperlinks im Menü. Die Eigenschaft float plaziert Elemente auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem <div>-Container für das Menü float:left zugewiesen, um ihn linksbündig auf der Seite auszurichten und den nachfolgenden Inhalt rechts vorbeifließen zu lassen. Inhalt Deshalb ist für den Inhalt, genauer gesagt für den <div>-Container des Inhalts, float:right angegeben, um ihn rechtsbündig neben dem Menü auszurichten. Weiterhin ist die Breite auf 82% festgelegt. Rechnet man die 12% vom Menü dazu, bleiben 6% als horizontaler Abstand zwischen beiden Bereichen übrig. Das ist alles. Achtung: Wird der linke Bereich zu klein, schraubt der sich natürlich auch runter - sprich: wird kleiner! Ich stimme dem Zergling zu, dass man Größenangaben NICHT mischen soll. Schönen Start in die Woche. __________________ Manche Menschen sind wie Schnitzel - nicht zäh, aber beidseitig bekloppt!

05.11.2007, 01:41
Papst Erfahrener Benutzer Registriert seit: 14.10.2007 Beiträge: 306 PHP-Kenntnisse: Fortgeschritten	p.s. es bieten sich list-elemente für deine Menüs an.

05.11.2007, 10:23
Curanai Erfahrener Benutzer Registriert seit: 13.05.2006 Beiträge: 466	Sorry, die Macht des Copy/Paste ging da mit mir durch ... g __________________ Manche Menschen sind wie Schnitzel - nicht zäh, aber beidseitig bekloppt!