HTML Tabellenformatierung in HTML Datei

|Bastion| · 3. November 2012

Hi,

bin gerade dabei eine Tabelle in Wordpress zu formatieren, ohne dabei eine css Datei anzulegen oder mir ein Plugin runterzuladen. Ich wollte das einfach in dem HTML Editor bei Wordpress machen.

Die Kommandos für die Tabelle ist ja klar. Aber iwie krieg ich das nicht hin mit dem style="..." bzw. class="..." Befehl. Und wie geht das mit a:hover und so, diesen Effekt wollte ich eig auch haben.

Hier ist der CSS-Code, vlt kann mir einer helfen.

Code:

/* "Winter Blues" CSS theme for CSS Table Gallery (http://icant.co.uk/csstablegallery/) by Gunta Klavina (http://www.klavina.com) */

table {font: 85% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;padding: 0; margin: 0; border-collapse: collapse; color: #333; background: #F3F5F7;}

table a {color: #3A4856; text-decoration: none; border-bottom: 1px solid #C6C8CB;}  

table a:visited {color: #777;}

table a:hover {color: #000;}  

table caption {text-align: left; text-transform: uppercase;  padding-bottom: 10px; font: 200% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;}

table thead th {background: #3A4856; padding: 15px 10px; color: #fff; text-align: left; font-weight: normal;}

table tbody, table thead {border-left: 1px solid #EAECEE; border-right: 1px solid #EAECEE;}

table tbody {border-bottom: 1px solid #EAECEE;}
                      
table tbody td, table tbody th {padding: 10px; background: url("td_back.gif") repeat-x; text-align: left;}

table tbody tr {background: #F3F5F7;}

table tbody tr.odd {background: #F0F2F4;}

table tbody  tr:hover {background: #EAECEE; color: #111;}

table tfoot td, table tfoot th, table tfoot tr {text-align: left; font: 120%  "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-transform: uppercase; background: #fff; padding: 10px;}

Edith 1: Um vlt mal einen Einstieg zu geben. Also ich habs so versucht, aber es hat sich außer der Schriftart nichts verändert.

Code:

<table class="table" width="100%" >
<tbody class="tbody">
<tr class="tr">
<td class="td">jo</td>
<td class="td">jo</td>
</tr>
</table>

Joypad · 3. November 2012

In deinem CSS Code werden nur HTML-Elemente und verschachtelte HTML-Elemente gestyled.
Um Klassen zu stylen musst du ".NameDerKlasse" benutzen.
In jedem Fall solltest du vermeiden Klassen so zu benennen wie die HTML-Elemente heißen.

Schau mal hier drüber und die Beispiele:
http://de.selfhtml.org/css/formate/zentrale.htm

|Bastion| · 3. November 2012

@ Joypad:

Du bist ein Held ^^. Jetzt wüsste ich bloß noch gerne wie ich das am besten mit Klassen versehe. Besonders die hover und visited Effekte. Ich weiß nämlich auch nicht ganz, was zu welchem HTML Tag gehört. Vlt kannst du nochmal kurz drüberschauen.

Kausalat · 3. November 2012

Was genau möchtest du gestalterisch überhaupt bezwecken?

In deiner bestehenden CSS-Datei werden sowohl Links (table a:gedöns) als auch mit der Maus überfahrene Tabellenzeilen (table tbody tr:hover) bereits formatiert.

In deinem Beispielquellcode kannst du die Klassen "table", "tbody", "tr" und "td" weglassen, da nicht sie, sondern die gleich lautenden Tags <table>, <tbody> etc. formatiert werden.

|Bastion| · 3. November 2012

Also in die Head Zeile einfach den CSS Code schreiben und dann ohne irgendwelchen Zusatz einfach die Tabelle schreiben? Ich probier's mal aus.

Edith:

Also ich habs probiert. Wenn ich das aber mache dann wird die ganze Wordpress Seite formatiert. Mit dem Class Tag funktionierte es noch, das ich nur die Tabelle formatieren kann. Ich weiß bloß eben nicht wie ich das alles zuordne.

Achso den CSS Teil hab ich so reingeschrieben vor die Tabelle:

<head>
<style type="text/css">
Der CSS Teil
</style>
</head>

ist das so richtig? Ist iwie bisschen komisch bei wordpress.

Kausalat · 3. November 2012

Wenn dein Wordpress-Theme fälschlicherweise auf Tabellen basiert, werden natürlich alle Tabellen formatiert.

Wie immer wäre ein Link zur Website hilfreich.

|Bastion| · 3. November 2012

Ich kanns nicht zeigen weil das ein Beitrag ist der noch nicht freigegeben wurde.

Wenn dem so wäre, wie kann man dann die ganzen Sachen sinnvoll mit Klassen ergänzen?

Edith:

Also bei nem einzelnen Dokument sieht das so aus und klappt auch Prima

HTML:

<html>
<head>
<style form="text/css">
/* "Winter Blues" CSS theme for CSS Table Gallery (http://icant.co.uk/csstablegallery/) by Gunta Klavina (http://www.klavina.com) */

table {font: 85% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;padding: 0; margin: 0; border-collapse: collapse; color: #333; background: #F3F5F7;}

table a {color: #3A4856; text-decoration: none; border-bottom: 1px solid #C6C8CB;}  

table a:visited {color: #777;}

table a:hover {color: #000;}  

table caption {text-align: left; text-transform: uppercase;  padding-bottom: 10px; font: 200% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;}

table thead th {background: #3A4856; padding: 15px 10px; color: #fff; text-align: left; font-weight: normal;}

table tbody, table thead {border-left: 1px solid #EAECEE; border-right: 1px solid #EAECEE;}

table tbody {border-bottom: 1px solid #EAECEE;}
                      
table tbody td, table tbody th {padding: 10px; background: url("td_back.gif") repeat-x; text-align: left;}

table tbody tr {background: #F3F5F7;}

table tbody tr.odd {background: #F0F2F4;}

table tbody  tr:hover {background: #EAECEE; color: #111;}

table tfoot td, table tfoot th, table tfoot tr {text-align: left; font: 120%  "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-transform: uppercase; background: #fff; padding: 10px;}
</style>
</head>
<body>
<table width="50%">
<caption> Wordpress Tabelle</caption>
<tbody>
<thead>
<tr>
<th>Wordpress </th>
<th>Zelle table head</th>
</tr>
</thead>
<tr>
<td>normale</td>
<td>Zelle</td>
</tr>
</tbody>
</table>
</body>
</html>

Es wird bei Wordpress mit der CSS Eingabe aber scheinbar bloß über ein Plugin gehen, sonst wäre es ja nicht so schwer oder? Ich versuch mich schon den ganzen schönen Vormittag drum^^.

Vielleicht kann man die Klassen auch kombinieren? Ich hab bloß keine Ahnung ...

Grüße

craine · 3. November 2012

Moin,
du könntest neue Klassen anlegen.

Statt <table class="table"> z.B. <table class="table-hover"> und die dann per CSS formatieren.

Code:

.table-hover { color: red; }

.table-hover a { /* formatiert alle Links in der Klasse table-hover */ }

.table-hover a:hover { color: green; }

usw

Grüße

|Bastion| · 3. November 2012

Aber dann müsste ich ja den table Tag mit mehreren Klassen belegen. Wie geht das dann?

Danke schonmal

Kausalat · 3. November 2012

Bei Klassen geht's problemlos: class="eins zwei drei". Ob es sinnvoll ist, steht auf einem anderen Blatt. Eventuell sollte das Gesamtkonzept des Aufbaus komplett überdacht werden.

|Bastion| · 3. November 2012

Für alle dies vlt interessiert. Ich habs hingekriegt ^^, ist zwar der ganze Samstag draufgegegangen, aber was macht man nicht fürn paar Zeilen html und css.

Also scheinbar verträgt sind der wordpress Editor nicht so gut mit Klassen. Hab mich belesen. Deshalb hab ich alles in ID´s umgeschrieben. Vlt haben sich die Klassen auch mit dem Theme gebissen, keine Ahnung.

Also alles abgeschrieben und mit ID´s versehen (bei Copy & Paste hat es nciht funktioniert, keine Ahnung warum ...).

HTML:

<html>
<head>
<style form="text/css">
/* "Winter Blues" CSS theme for CSS Table Gallery (http://icant.co.uk/csstablegallery/) by Gunta Klavina (http://www.klavina.com) */
#table1
{
font: 85% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
padding: 0;
margin: 0;
border-collapse: collapse;
color: #333;
background: #F3F5F7;
width: 100%;
}
#table1 a
{
color: #3A4856;
text-decoration: none;
border-bottom: 1px solid #C6C8CB;
}
#table1 hover
{
color: #000;
}
#table1 th
{
background: #3A4856;
padding: 15px 10px;
color: #fff;
text-align: left;
font-weight: normal;
}
#table1 td
{
padding: 10px;
text-align: left;
background: url("td_back.gif") repeat-x;
}
#table1 tr:hover
{
background: #EAECEE;
color: #111;
}
#table1 a:visited 
{
color: #777;
}
#table1 caption 
{text-align: left; 
text-transform: uppercase; 
padding-bottom: 10px; 
font: 200% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
}
#table1 tbody, table thead {
border-left: 1px solid #EAECEE; 
border-right: 1px solid #EAECEE;
}
#table1 tbody {
border-bottom: 1px solid #EAECEE;
}
#table1 tbody tr {
background: #F3F5F7;
}
#table1 tbody tr.odd {
background: #F0F2F4;
}
#table1 tfoot td, table tfoot th, table tfoot tr {
text-align: left; 
font: 120%  "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; 
text-transform: uppercase; 
background: #fff; 
padding: 10px;
}



</style>
</head>
<body>
<table id="table1" width="50%">
<caption id="table1 caption"> Wordpress Tabelle mit ID´s</caption>
<tbody>
<thead>
<tr>
<th>Wordpress </th>
<th>th Tag </th>
</tr>
</thead>
<tr>
<td>normale</td>
<td>zelle</td>
</tr>
</tbody>
</table>
</body>
</html>

Insgesamt ist es doch noch ein erfolgreicher Samstag geworden ^^. Sogar der Mouse over Effekt ist geblieben.

Ich danke euch!

Daaron · 3. November 2012

Warum sollte der Editor nicht mit Klassen klar kommen? Irgendwie bezweifle ich das...
Und nochmal, weil du es bei der ersten Erwähnung wohl nicht lesen wolltest: Klassen und IDs sollten SINNVOLLE Namen haben. Niemals!!! sollte man IDs wie #table1 verwenden. DA sieht man nach ein paar Wochen nicht mehr durch. Schlimmer sind Klassen wie .table...

Wozu überhaupt Tabellen? Hast du wirklich tabellarische Daten? Nicht-tabellarische Daten innerhalb einer <table> darstellen ist ein absolutes No-Go!

|Bastion| · 3. November 2012

@ Daaron

Naja einfach weil es nicht ging. ist vielleicht auch Template spezifisch, mit den Klassen ging es jedenfalls nicht.

Ich brauch die Tabellen einfach um eine preisliste darzustellen und da wollte ich etwas optisch ansehnliches haben.

Zu der Bennennung, ich glaub dir das schon. Es ist bloß so, das das sowieso der einzige HTML Code ist, den ich dort reinschreibe. Natürlich wenn ich das erweitern will, ist es doof. Hab ich auch schon geändert.

Nochmal danke für den Hinweis.

Suche

HTML Tabellenformatierung in HTML Datei

|Bastion|

Lieutenant

Joypad

Lieutenant

|Bastion|

Lieutenant

Kausalat

Gast

|Bastion|

Lieutenant

Kausalat

Gast

|Bastion|

Lieutenant

craine

Lt. Junior Grade

|Bastion|

Lieutenant

Kausalat

Gast

|Bastion|

Lieutenant

Anhänge

Daaron

Fleet Admiral

|Bastion|

Lieutenant

Ähnliche Themen