Tabellen per CSS?

[jackie05]

Hallo,
ich habe ein kleines problem mit CSS und zwar, weiss ich nicht wie ich per CSS Tabellen gestalten kann, die ich dann mit <h1>Test</h1> ansprechen kann.

Ich möchte das:

<table border="0" width="100%" style="border: 1px dotted #000000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" bgcolor="#F0F0F0">
<tr>
<td align="center">Test...</td>
</tr>
</table><br>

in CSS einbauen, aber wie mache ich das am einfachsten?

Ich hab mal ein Test in CSS versucht:

.content h1 {
border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #808080; border-bottom-width: 2px;
}

leider zeigt er mir keine Tabelle an, wenn ich das hier schreibe:
<h1>Test</h1>

Ich wäre euch sehr dankbar, wenn mir da einer weiterhelfen könnte.

MfG

 

[prm]

Wenn du nicht auf die Klasse ".content" verweist, dann kann auch die h1 Formatierung nicht angezeigt werden.
So sollte es gehen:

<td><h1 class="content">Überschrift</h1></td>

Oder generell für h1 CSS:

h1 {
border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #808080; border-bottom-width: 2px;
}

HTML:

<td><h1>Überschrift</h1></td>

 

[jackie05]

Danke Dir, ich möchte aber das hier:

<table border="0" width="100%" style="border: 1px dotted #000000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" bgcolor="#F0F0F0">
<tr>
<td align="center">Test...</td>
</tr>
</table><br>

in CSS einbauen, nur weiss ich nicht wie ich das jetzt machen soll.

 

[Loveboat]

möchtest Du die ganze Table ansprechen, so setzt Du eine Klasse (sofern die Eigenschaften mehrmals verwendet sollen) oder eine ID (sofern eine einmalige Beschreibung, die ID darf NIEMALS zweimal vorkommen).

In CSS beschreibst Du dann die Eigenschaften dieser Tabelle, wobei Du auch auf einzelne Elemente dieser Tabelle zurückgreifen kannst.

<style type="text/css">
#einmaligeTabelle {
border: 1px dotted #000000;
padding: 1px 4px 1px 4px;
}
 
#einmaligeTabelle td {
text-align: center;
}
 
#einmaligeTabelle h1 {
 
}
</style>

<table id="einmaligeTabelle" class="table" border="0" width="100%" bgcolor="#F0F0F0">
<tr>
<td><h1>Test...</h1></td>
</tr>
</table><br>

 

[prm]

Willst du die Tabelle evtl. durch einen Div ersetzen?
Dann so:

.content {
width: 100%;
border: 1px dotted #000;
padding: 1px 4px;
background: #f0f0f0;
text-align: center;
}

<div class="content">
<h1>Überschrift</h1>
<p>
Text in einem Absatz
</p>
</div>

 

[Maik]

Hi,

Danke Dir, ich möchte aber das hier:

<table border="0" width="100%" style="border: 1px dotted #000000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" bgcolor="#F0F0F0">
<tr>
<td align="center">Test...</td>
</tr>
</table><br>

in CSS einbauen, nur weiss ich nicht wie ich das jetzt machen soll.

dir stehen hier grundsätzlich drei Varianten zur Auswahl:

• Diese Tabelle existiert in dem HTML-Dokument nur einmal, sprich es gibt darin keine weiteren Tabellen.
  

table {
width:100%;
border:0; 
background:#F0F0F0;
}

table td {
border:1px dotted #000000;
padding:1px 4px; 
}

• Das HTML-Dokument enthält weitere Tabellen, die Formatierung soll aber nur für diese eine Tabelle gelten, also wird ihr ein ID-Bezeichner übergeben.
  

<table id="ID-Bezeichner"> ... </table>

table#ID-Bezeichner {
width:100%;
border:0; 
background:#F0F0F0;
}

table#ID-Bezeichner td {
border:1px dotted #000000;
padding:1px 4px; 
}

• Diese Tabelle kommt im HTML-Dokument mehrmals zum Einsatz, übrige Tabellen sollen von dieser Formatierung aber ausgeschlossen werden, also erhält sie in diesem Fall einen Klassen-Bezeichner.
  

<table class="Klassen-Bezeichner"> ... </table>
<table class="Klassen-Bezeichner"> ... </table>
<table class="Klassen-Bezeichner"> ... </table>

table.Klassen-Bezeichner {
width:100%;
border:0; 
background:#F0F0F0;
}

table.Klassen-Bezeichner td {
border:1px dotted #000000;
padding:1px 4px; 
}

Wenn du nun noch die Überschrift 1.Ordnung (<h1>) im Kontext zu dieser Tabelle formatieren möchtest, verwendest du den Selektor für Nachfahren - also:

<table>
    <tr>
        <td><h1>Test</h1></td>
    </tr>
</table>

table td h1 { /* CSS-Formatierung für h1-Element */ }

<table id="ID-Bezeichner">
    <tr>
        <td><h1>Test</h1></td>
    </tr>
</table>

table#ID-Bezeichner td h1 { /* CSS-Formatierung für h1-Element */ }

<table class="Klassen-Bezeichner">
    <tr>
        <td><h1>Test</h1></td>
    </tr>
</table>

table.Klassen-Bezeichner td h1 { /* CSS-Formatierung für h1-Element */ }

mfg Maik