Rahmen um Zellen einer Tabelle?

nolive · 05.03.2010

Ich bin dabei gerade einen Kalender zu erstellen, und würde gerne um die Wochentage einen Rahmen machen.

Im Anhang das Bild wie ich es mir vorstelle und der Code.

Danke

Code:

<body>
<table width="825" height="238" border="0">
  <tr>
    <td height="42" colspan="5" align="center" valign="middle" bgcolor="#F2F8FC"><strong>Von 22.02.2010 bis 26.02.2010</strong></td>
  </tr>
  <tr>
    <td width="157" height="58" align="center" valign="middle" bgcolor="#E5F0FA">Montag</td>
    <td width="157" align="center" valign="middle" bgcolor="#E5F0FA">Dienstag</td>
    <td width="157" align="center" valign="middle" bgcolor="#E5F0FA">Mittwoch</td>
    <td width="157" align="center" valign="middle" bgcolor="#E5F0FA">Donnerstag</td>
    <td width="157" align="center" valign="middle" bgcolor="#E5F0FA">Freitag</td>
  </tr>
  <tr>
    <td height="30"><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30" /></td>
    <td><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30" /></td>
    <td><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30" /></td>
    <td><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30" /></td>
    <td><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30" /></td>
  </tr>
  <tr>
    <td height="30"><img src="kalender/Grundstoff/04_grundstoff.png" width="157" height="30" /></td>
    <td><img src="kalender/Grundstoff/05_grundstoff.png" width="157" height="30" /></td>
    <td><img src="kalender/Grundstoff/06_grundstoff.png" width="157" height="30" /></td>
    <td><img src="kalender/Grundstoff/07_grundstoff.png" width="157" height="30" /></td>
    <td><img src="kalender/A-Spezial/01_A-Spezial.png" width="157" height="30" /></td>
  </tr>
  <tr>
    <td height="30">&nbsp;</td>
    <td><img src="kalender/Uhrzeiten/20.00-20.45.png" width="157" height="30" /></td>
    <td><img src="kalender/Uhrzeiten/20.00-21.30.png" width="157" height="30" /></td>
    <td><img src="kalender/Uhrzeiten/20.00-20.45.png" width="157" height="30" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="30">&nbsp;</td>
    <td><img src="kalender/B-Spezial/1.0_B-Spezial.png" width="157" height="30" /></td>
    <td><img src="kalender/C-Spezial/03_C-Spezial.png" width="157" height="30" /></td>
    <td><img src="kalender/B-Spezial/1.2_B-Spezial.png" width="157" height="30" /></td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Bonsai · 05.03.2010

AW: Rahmen um Zellen einer Tabelle?

Meinst Du so etwas?

HTML:

<html>
<body>
<table width="825" height="238" border="0" style="border-collapse:collapse">
  <tr>
    <td height="42" colspan="5" align="center" valign="middle" bgcolor="#F2F8FC">
    <strong>Von 22.02.2010 bis 26.02.2010</strong></td>
  </tr>
  <tr>
    <td width="157" height="58" align="center" valign="middle" bgcolor="#E5F0FA"
    style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; ">Montag</td>
    <td width="157" align="center" valign="middle" bgcolor="#E5F0FA"
    style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; ">Dienstag</td>
    <td width="157" align="center" valign="middle" bgcolor="#E5F0FA"
    style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; ">Mittwoch</td>
    <td width="157" align="center" valign="middle" bgcolor="#E5F0FA"
    style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; ">Donnerstag</td>
    <td width="157" align="center" valign="middle" bgcolor="#E5F0FA"
    style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; ">Freitag</td>
  </tr>
  <tr>
    <td height="30" style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    padding:1em; "><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30"></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    padding:1em; "><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    padding:1em; "><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    padding:1em; "><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    padding:1em; "><img src="kalender/Uhrzeiten/18.30-20.00.png" width="157" height="30" /></td>
  </tr>
  <tr>
    <td height="30" style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; "><img src="kalender/Grundstoff/04_grundstoff.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; "><img src="kalender/Grundstoff/05_grundstoff.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; "><img src="kalender/Grundstoff/06_grundstoff.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; "><img src="kalender/Grundstoff/07_grundstoff.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; "><img src="kalender/A-Spezial/01_A-Spezial.png" width="157" height="30" /></td>
  </tr>
  <tr>
    <td height="30" style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; ">&nbsp;</td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; "><img src="kalender/Uhrzeiten/20.00-20.45.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; "><img src="kalender/Uhrzeiten/20.00-21.30.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; "><img src="kalender/Uhrzeiten/20.00-20.45.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-top-width:2px; border-top-style:solid; border-top-color:red;
    padding:1em; ">&nbsp;</td>
  </tr>
  <tr>
    <td height="30" style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; ">&nbsp;</td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; "><img src="kalender/B-Spezial/1.0_B-Spezial.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; "><img src="kalender/C-Spezial/03_C-Spezial.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; "><img src="kalender/B-Spezial/1.2_B-Spezial.png" width="157" height="30" /></td>
    <td style="border-left-width:2px; border-left-style:solid; border-left-color:red;
    border-right-width:2px; border-right-style:solid; border-right-color:red;
    border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:red;
    padding:1em; ">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Der Code ist jetzt zwar entsetzlich aufgebläht und es würde Sinn machen, die Style-Angaben in eine externe CSS-Datei auszulagern, aber es klappt und Du kannst es Dir gut ansehen.

Ach ja, und so sieht es dann aus:

Poki29 · 05.03.2010

AW: Rahmen um Zellen einer Tabelle?

Ich würde das ganze lösen, indem ich die jeweils die roten Bereiche in Boxen packen würde die dann halt einfach dann per css die Border zugewießen bekommen. So kannst du Farbe oder dicke des Rahmens in Sekunden ändern und sparst dir ne Menge Code.