• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellen mit 1-Pixel-Rahmen

Status
Für weitere Antworten geschlossen.

Apfel

Neues Mitglied
Hallo

Da ich gerade eine Homepage bastel, taucht nun auch schon das erste Problem auf.
Ich möchte bei mir Tabellen haben, die nur einen 1-Pixel Rahmen haben.
Doch leider gelingt mir das nie.

Code:
<table width="100" border="1"  bordercolor="#000000"cellspacing="0" cellpadding="0">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

Der Rahmen hat ja den wert 1. Eigentlich müsste es gehen, aber da die Tabelle und die einzellnen Zellen 1 Rahmen haben und diese zusammengezogen werden, sind die dann 2 Pixel dick.

Wie schaffe ich es, wirklich nur einen 1 Pixel Rahmen zu haben? :cry:

Danke und liebe Grüße,
Apfel
 
Werbung:
bodercolor und border sind schon sehr veraltet, und werden von manchen
browsern sowieso nicht mehr richtig angezeigt.
Deshalb macht man das mit CSS :

Code:
<table width="100" cellpadding="0" cellspacing="0" style="border: 1px solid #000;"> 
  <tr> 
    <td style="border-bottom: 1px solid #000"></td> 
  </tr> 
  <tr> 
    <td></td> 
  </tr> 
</table>

im <table> tag wird mit style bzw. border die breite (1px) die art
(solid also normal durchgezogen) und die farbe (schwarz) definiert. nun wird
schonmal die gesamte tabelle einmal umrahmt. jetzt brauchst du aber noch einen
rahmen zwischendurch richtig ? den gibts du in der jeweiligen zelle (<td>) an.
in diesem falle mit border-bottom also der rahmen unten.

du könntest es auch folgendermaßen definieren :

Code:
<table width="100" cellpadding="0" cellspacing="0" style="border: 1px solid #000;"> 
  <tr> 
    <td></td> 
  </tr> 
  <tr> 
    <td  style="border-top: 1px solid #000"></td> 
  </tr> 
</table>

so gibst du halt nur den rahmen oben (top) an.
noch fragen ? dann frag :mrgreen: :mrgreen:
 
Ich würde das noch weiter verallgemeinern:
Wenn jetzt nämlich noch ein paar Spalten dazukommen, fallen ja dann die seitlichen Ränder zusammen, deswegen müsste man auch noch folgendes angeben:
Code:
<td  style="border-right: 1px solid #000">
Kurze Erklärung: Hier wird gesagt, dass nur der Rand rechts (right) 1 Pixel breit sein soll, sodass er einem anderen Rand links nicht in die Quere kommt (denn der hat ja 0 Pixel, weil man nur dem rechten Recht den Wert 1px zugewiesen hat). Im Grunde das Gleiche wie das, was blacKT schon erklärt hat (der kann das sowieso viel besser vermitteln :mrgreen: ), nur halt so, dass es sich jetzt um die seitlichen Ränder handelt.

Das müsste man jetzt aber bei jeder Zelle so angeben und das ist ziemlich umständlich. Deswegen würde ich mit CSS im <head>-Bereich definieren, dass diese Eigenschaften auf jede Tabelle auf der ganzen Seite zutreffen soll. Das geht folgendermaßen:
Im <head>-Bereich:
Code:
<style type="text/css">
table {border-top: 1px black solid; border-left: 1px black solid;}
table tr td {border-bottom: 1px black solid; border-right: 1px black solid;}
</style>
Das bedeutet:

table {...}

Hier wird festgelegt, was für alle Tabellen im gesamten Dokument gelten soll. Man könnte hier auch z.B. die Hintergrundfarbe oder die Schriftart angeben.


table tr td {...}

Das bedeutet, dass die in den geschweiften Klammer "{}" festgelegten Eigenschaften für alle <td>-Tags gelten soll, die sich in <tr>-Tags befinden, die dann wiederum in einem <table>-Tag enthalten sind.


table {border-top: 1px black solid; border-left: 1px black solid;}

Das ist im Grunde das Gleiche wie vorher, aber mit einem entscheidenden Unterschied:
Nach der blacKT'schen Lösung musstest du immer die unterste oder die oberste Zelle "rahmenlos" lassen, damit nicht der unterste oder oberste Rand der Zelle mit dem untersten oder obersten Rand der Tabelle zusammenfällt (dann hättest du ja wieder einen 2px-Rahmen gehabt, aber diesmal nur unten). Hier wird angegeben, dass von der gesamten Tabelle überhaupt nur der obere und der linke Rand mit 1px Dicke zu sehen sein soll und der Rest gar nicht.
Dieser Rest wird ja aus den unteren und den rechten Rändern der einzelnen Zellen gebildet.


Ich hoffe, das war jetzt halbwegs verständlich erklärt, wenn nicht: einfach fragen! :)
 
Werbung:
was du jetzt hier so schön mit hervorgehobenen textstellen beschrieben hast,
ist natürlich eine super lösung :mrgreen: (doch soll das nicht heißen , dass ich
nicht auch darauf gekommen wäre ;ugl) nein ich hatte blos keine lust mehr zu
schreiben ;ugl und vielleicht kennt er sich mit css ja ein bisschen aus :mrgreen:

p.s.: wenn mir feliks bald zurück schreibt und ich vlt. mod werde, werde ich
sowieso hier ein paar tutorials reinschreiben
 
wieso musst dazu ein Mod werden?

Wir brauchen nur einen neuen bereich!!!

Da hjab ich auch schon ne PM geschrieben aber keine antwort bekommen
 
na damit ich sie jedes forum html, php, css, java usw. als
kleine ankündigung bzw. tipp schreiben kann.
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben