✔ Tabellenformatierung

S

smyle

Erfahrenes Mitglied
Hallo Leute ..

Ich habe folgendes Problem.
Das Grundgerüst habe ich ohne Probleme codiert:

HTML: 
<html><head>
<title></title>
</head>
<body bgcolor="#646464">

<table  width="100%" height="100%">
  <tr valign="middle">
    <td>

<table width="1010" height="654" bgcolor="#FFFFFF" align="center">
  <tr valign="middle">
    <td>

<table width="962" height="606" border="0" align="center" style="border:8px solid #B1B3B4;">
  <tr>
    <td width="944" height="108" colspan="3"><font face="Arial Regular, Versal" size="27px" style="font-stretch:40px;">Titel</font></td>
  </tr>
  <tr>
    <td width="101" rowspan="2" height="498" valign="top">
	</td>
	<td width="584" height="452"></td>
	<td width="259" height="452"></td>
  </tr>
  <tr>
    <td height="46" colspan="2">
Adresse
</td>
  </tr>
</table>


    </td>
  </tr>
</table>

    </td>
  </tr>
</table>

</body>
</html>

Jedoch weiss ich nicht wie ich alle Ränder genau gleich wie den Rand der Tabelle aussehen lassen kann.
Die Eigenschafften des Randes sind: border:8px solid #B1B3B4;

Ich habe noch ein Bild angehängt, wie das Grundgerüst zum Schluss ausehen muss.

Kann mir da jemand helfen und mir sagen oder sogar den Code geben um dieses Porblem zu lösen?

Hoffentlich kann mir jemand helfen.
Ich bedanke mich schon im voraus für eure Hilfe!
 

Anhänge

  • webshop_linien.jpg
    webshop_linien.jpg
    39,7 KB · Aufrufe: 15
Hi,

der Rahmen muß in CSS auch für die <td>-Elemente angegeben werden:
HTML: 
<html><head>
<title></title>

<style type="text/css">
table td table  { border-collapse:collapse; }
table td table, table td table td { border:8px solid #B1B3B4; }
</style>

</head>
<body bgcolor="#646464">

<table  width="100%" height="100%">
  <tr valign="middle">
    <td>

<table width="1010" height="654" bgcolor="#FFFFFF" align="center">
  <tr valign="middle">
    <td>

<table width="962" height="606" border="0" align="center">
  <tr>
    <td width="944" height="108" colspan="3"><font face="Arial Regular, Versal" size="27px" style="font-stretch:40px;">Titel</font></td>
  </tr>
  <tr>
    <td width="101" rowspan="2" height="498" valign="top">
	</td>
	<td width="584" height="452"></td>
	<td width="259" height="452"></td>
  </tr>
  <tr>
    <td height="46" colspan="2">
Adresse
</td>
  </tr>
</table>


    </td>
  </tr>
</table>

    </td>
  </tr>
</table>

</body>
</html>


mfg Maik
 
Genau .. Danke

Noch eine kurze Frage: Was muss ich noch machen damit die erste Tabelle keinen Rand bekommt, sondernd vielleicht nur eine schattierung oder so?

Das wäre dann diesen Teil:

HTML: 
<table  width="100%" height="100%">
  <tr valign="middle">
    <td>

Inhalt

    </td>
  </tr>
</table>
 
In meinen Beispiel besitzt die äußere Tabelle überhaupt keinen Rahmen, da sich die CSS-Selektoren auf die innere Tabelle und deren Tabellenzellen beziehen.

Ein "Schattenwurf" wird i.d.R. grafisch umgesetzt.

mfg Maik
 
Hallo

Wie du im Anhang sehen kannst hat es einen Rand zu viel.
Denn euserste Rand benötige ich nicht. Dieser sollte weg.

Dann ist mir noch etwas aufgefallen:

Auf der linken Seite müssen die Balken für die Links erstellt werden.
Habe es mit css versucht und mit <HR /> , jedoch hat es nicht ganz so geklappt.
Wie kann ich diese noch hinzufügen?
 

Anhänge

  • Umrandung.jpg
    Umrandung.jpg
    11,5 KB · Aufrufe: 11
smyle hat gesagt.:
Wie du im Anhang sehen kannst hat es einen Rand zu viel.
Denn euserste Rand benötige ich nicht. Dieser sollte weg.
Zum Vergrößern anklicken....
Dann nimmst du ihn halt einfach weg:

CSS: 
table td table td table { 
border-collapse:collapse; 
}
table td table td table, 
table td table td table td { 
border:8px solid #B1B3B4; 
}

smyle hat gesagt.:
Dann ist mir noch etwas aufgefallen:

Auf der linken Seite müssen die Balken für die Links erstellt werden.
Habe es mit css versucht und mit <HR /> , jedoch hat es nicht ganz so geklappt.
Wie kann ich diese noch hinzufügen?
Zum Vergrößern anklicken....
Eine horizontale Linie lässt sich auch mit Hilfe der border-bottom-Eigenschaft für die einzelnen Links erzeugen:

CSS: 
a { 
display:block; 
border-bottom:8px solid #B1B3B4;
}


mfg Maik
 
So etwas hatte ich auch versucht für die Links auf der Seite, aber leider gibt es immer eine Lücke zwischen den Ränder unterhalb, rechts und links des Links.
:(


Das andere hat funktioniert. Danke!
 

Anhänge

  • lücke.jpg
    lücke.jpg
    11,9 KB · Aufrufe: 12
Wie lange beschäftigst du dich schon mit HTML? Ist das deine erste Tabelle, die du strickst?

Eine Angabe zum Zellenabstand und Zelleninnenabstand fehlt in dieser Tabelle, womit der Browser gewisse Abstände im Tabellengerüst einhält, die auf null gesetzt gehören.

mfg Maik
 
Also Tabellen habe ich schon mehrmals gemacht aber immer gleich.
das heisst:

HTML: 
<table>
<tr>
<td></td>
</tr>
</table>

Und CSS habe ich auch noch nie selber codiert.

Jedenfalls danke, es hat funktioniert, nun sieht meine Tabelle so aus wie ich sie wollte. Vielen, vielen Dank :D:D
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück