HTML/CSS Gitternetzlinien werden nicht angezeigt

MurphsValentine · 24. Juni 2013

Hallo,
ich bastel gerade an einer Inet Seite inerhalb meiner Firma.

Ich bin so eigentlich recht bewandert, was das Thema CSS und HTML angeht, nur steh ich grad anscheinend etwas auf dem Schlauch

Ich habe eine extra .css Datei angelegt, in welcher ich sämtliche Formatierungen ablege, die ich für mein HTML Dokument vornehmen möchte.

Ich habe eine Tabelle, in welcher ich eine ID aufrufe.
Quasi:
<table id="main_table">
<tr>
<td> Links </td>
<td> Mitte </td>
<td> Rechts </td>
</tr>
</table>

Die ID sieht wie folgt aus:
#main_table {

border: 1px;
caption-side: top;
border-style: solid;
border-width: 1px;
border-color: black;
border-collapse: separate;
width: 80%;

}

Die Rahmenlinien werden auch normal angezeigt wie sie angezeigt werden sollen.
Also solid black.

Jedoch habe ich keine Gitternetzlinien?!

Mir fällt im Moment dazu einfach keine Lösung ein.
Würde mich über Hilfe sehr freuen.

Danke

Drexel · 24. Juni 2013

TR/TD auch formatieren via CSS?

MurphsValentine · 24. Juni 2013

Geht es auch genauer wie du das meinst?
In tr und td habe ich noch garnicht eingearbeitet.

Yuuri · 24. Juni 2013

Code:

#main_table td { ... }

Meint er. Die Zellen haben ja auch Linien, nicht nur die Tabelle selbst.

hanschke · 24. Juni 2013

http://de.selfhtml.org/

Speedy. · 24. Juni 2013

Code:

<!doctype html>

<html>
	<head>
                <meta charset="utf-8">
		<title>Tabellenrahmen</title>
		<style>
			#main-table {
				width: 80%;
				border-collapse: collapse;
			}

			#main-table td {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table id="main-table">
			<tr>
				<td>Links</td>
				<td>Mitte</td>
				<td>Rechts</td>
			</tr>
		</table>
	</body>
</html>

Ein paar Anmerkungen:
- Dein CSS ist etwas unpraktisch, denn die ganzen Borderstyles kannst du auch in einer Codezeile unterbringen, nicht in vier.
- Wenn du einen Abstand zwischen <td> habe möchtest, dann verwende border-collapse: seperate;.
- Meiner persönlichen Meinung nach sollte man für HTML Klassen und IDs keine Unterstriche, sondern Bindestriche verwenden (siehe in meinem Code). Soweit ich weiß ist das die Empfehlung für HTML, Unterstriche kommen etwa in PHP zum Einsatz.

Nimm die Frage nicht persönlich, aber bist du sicher, dass du eine Firmenseite aufbauen willst, wenn du schon bei dieser Sache stecken bleibst? Das sind immerhin die Basics.

F_GXdx · 24. Juni 2013

Verwende keine table.

Reglohln · 24. Juni 2013

F_GXdx schrieb:
Verwende keine table.

Warum sollte er das nicht tun? Tabellen werden für tabellarische Daten sehr wohl benutzt!

Speedy. · 24. Juni 2013

Vielleicht sollte man es so formulieren: auf keinen Fall Tabellen für Seitenlayouts, aber für tabellarische Daten sind sie natürlich weiterhin gedacht.

Daaron · 24. Juni 2013

F_GXdx schrieb:
Verwende keine table.

In den meisten Fällen würd ich dir umgehend zustimmen, weil Tabellen immer noch viel zu oft als Layout-Träger missbraucht werden.
Wenn hier aber von sichtbaren Gittern die Rede ist klingt es für mich eher wie eine Tabelle, die auch wirklich tabellarische Daten enthält. Da ist <table> natürlich korrekt.

Je nachdem welche Optik man anstrebt sollte man aber trotzdem drüber nachdenken, ob es so clever ist, jeder Zelle einen Rundum-Rahmen zu geben. Viel cooler sieht es oftmals aus, wenn die geraden und ungeraden Zeilen (oder Spalten) einfach farblich unterschiedlich hinterlegt sind.
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Drexel · 24. Juni 2013

MurphsValentine schrieb:
Hallo,
Ich bin so eigentlich recht bewandert, was das Thema CSS und HTML angeht

Sorry, ich dachte nach dem Hinweis reicht mein Denkanstoss. So wie Yuuri schon aufgezigt hast, musst Du den Datenzellen (td) einfach auch noch nen Rahmen verpassen.

F_GXdx · 24. Juni 2013

Regel Nr. 2: Verwende trotzdem keine table.

Speedy. · 24. Juni 2013

Das ist natürlich eine sehr fundierte und mit Argumenten unterlegte Aussage. In dem Fall werde ich jetzt nur noch div's für meine Projekte verwenden, etwa wenn ich eine Mitgliederliste mit Adresse, Telefonnummer und anderen Daten erstellen möchte. Das ist zwar ein bisschen mehr Styling und semantischer Blödsinn, aber hey, wenigstens keine Tabelle genommen

F_GXdx · 24. Juni 2013

Guter Junge

Jetzt wollte ich grad Regel Nr. 3 schreiben, aber ist wohl obsolet geworden.

Daaron · 24. Juni 2013

Semantik ist für dich wohl #Neuland, oder?
<table> hat seine Daseinsberechtigung... ganz im Gegensatz zu z.B. <marquee>

Madman1209 · 25. Juni 2013

Hi,

muss Daaron voll und ganz zustimmen: wenn ich eine Tabelle darstellen will (wovon bei sichtbaren Gitternetzlinien auszugehen ist) nimmt man eine Table. Die "Unsitte" das komplette Layout einer Webseite in eine Tabelle zu quetschen hat doch damit überhaupt nichts zu tun, da sollte man natürlich darauf verzichten. Aber andersherum ist es genauso verkehrt, also keine Tabelle zu verwenden, wenn ich eine tabellarische Darstellung brauche.

VG,
Mad

F_GXdx · 25. Juni 2013

Wo ist denn der Vorteil? Ich sehe keinen. Es wird unübersichtlicher, höchstens.

Yuuri · 25. Juni 2013

Schau dir doch die div-Suppe bei tabellarischen Daten an. Sieh dir eine Excel-Tabelle an. Mal sehen wie du mit divs rumgurkst, wenn es mit Tabellen extrem vereinfacht wird.

Daaron · 25. Juni 2013

Es geht um Semantik! HTML, insbesondere HTML5 (also das, was jeder halbwegs moderne Webentwickler verwendet) ist eine semantische Markup-Sprache. Nur weil man allen Scheiß in <div> & <span> lösen KANN heißt das nicht, dass man es SOLL.

Du willst eine unsortierte Liste darstellen, z.B. eine Reihe von Stichpunkten zu einem Thema? Dann nimm <ul> (steht übrigens für unordered list, wie überraschend).
Du willst eine sortierte Liste darstellen, z.B. eine Kapitelübersicht oder einen Arbeitsablauf? Dafür ist die ordered list <ol> da.
Du willst eine Navigation erstellen? Willkommen bei <nav>.
Du hast ein Zitat? <blockquote> (für lange Textblöcke) und <q> (Inline-Zitate)

So, und wenn du jetzt eine verdammte Tabelle hast, dann nimmst du auch verdammt noch einmal das <table>-Element. Warum? Weil nicht NUR sehende Menschen deine Seite besuchen und analysieren. Zu deinen Besuchern werden auch Suchmaschinen gehören. Außerdem ist das Netz überraschend voll mit Menschen, die deine Seite NICHT sehen können, sondern nur hören oder fühlen. Ja, das gibt es. Webseiten fühlen. Nennt sich Braille-Terminal.
Für genau diese Besucher, die die Bedeutung und die Sortierung von Inhalt nicht an ihrer Darstellung (also am CSS) erkennen können, nutzt man semantisches Markup. Das Markup definiert die Lese-Richtung (Tabellen liest man z.B. oft von oben nach unten) und die Betonung (<strong> macht Text nicht nur fett, es gibt ihm auch höheres Gewicht) und allgemeine Informationen zur Struktur des Textes, z.B. dass dein <article> eben ein <aside>-Element mit nützlichen Zusatzinformationen hat, die aber nicht zum Verständnis des Artikels nötig sind, genauso aber nicht losgelöst von ihm existieren können.

In diesem Sinne: Willkommen im #Neuland!
Wenn du jetzt so fleißig übst wie dein Profilbild, dann hast du das Thema Semantik irgendwann in 10 Jahren, wenn die fähigen Entwickler alle schon HTML6 oder 7 verwenden, halbwegs im Griff und kannst dich langsam daran machen, wieso ein :after/:before - Pseudoelement toll ist.

F_GXdx · 26. Juni 2013

Ja, gut, Barrierefreiheit ist ein Punkt, wo man möglicherweise in einigen Fällen Vorteile erzielt, da muss ich dir Recht geben.

HTML/CSS Gitternetzlinien werden nicht angezeigt

MurphsValentine

Gast

Lt. Commander

MurphsValentine

Gast

Fleet Admiral

Lieutenant

Speedy.

Gast

Captain

Commander

Speedy.

Gast

Fleet Admiral

Lt. Commander

Captain

Speedy.

Gast

Captain

Fleet Admiral

Fleet Admiral

Captain

Fleet Admiral

Fleet Admiral

Captain

Ähnliche Themen