Tabellen und Frames

Eindeutig den Inhalt einer Zelle von den anderen Zellen getrennt werden, um die Grenze zugegeben. Für ihre Einrichtung entspricht dem Parameter <TABLE> -Tag Grenze, die die Dicke der Grenze bestimmt.

Beispiel 1 zeigt, wie ein Rand um die Zellen zu schaffen.

Beispiel 1: Hinzufügen eines Rahmen zu dem Tisch

gültig HTML
<DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titel> Die Dicke der Grenze </ title>
</ Head>
<Body>

<Table width = "200" cellpadding = "5" border = "2">
<Tr>
<Td> Tscheburaschka </ td>
<Td> Krokodil Gena </ td>
<Td> Shapoklyak </ td>
</ Tr>
</ Table>

</ Body>
</ Html>

Der Rahmen unterscheiden sich somit leicht in verschiedenen Browsern in Erscheinung erstellt.

Internet Explorer Firefox Oper
Internet Explorer Firefox Oper

Fig. 1. Rahmen, die durch die Grenze mit

Um einen Rahmen zu einer Spezies erhalten wird empfohlen , die Grenze Stilattribute zu verwenden, es auf die Zellen der Tabelle Anwendung (Tag <TD> oder <TH>). Doch hier erwarten wir die Tücken. Da der Rahmen für jede Zelle erzeugt wird, Grenze die Zellen erhalten Kontaktflächen mit doppelter Dicke. Um die obigen Funktionen zu lösen, gibt es mehrere Möglichkeiten. Die einfachste - nutzen Sie die border-collapse Eigenschaft mit dem Wert des Zusammenbruchs. Seine Aufgabe ist es Leitung zu überwachen, und statt der doppelten Rahmen ein einziges zu vertreten. Dieses Attribut ist genug , um den Tag <TABLE>, hinzuzufügen , und dann wird er alles selbst (Beispiel 2) zu tun.

Beispiel 2. Anwendung von border-collapse einen Rahmen der Tabelle zu erstellen

gültig HTML
gültiges CSS
<DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titel> Schaffung eines Rahmens </ title>
<Style type = "text / css">
TABELLE {
border-collapse: collapse; / * Die Linie zwischen den Zellen als ein * angezeigt /
}

TD {
Grenze: 2px solide grün; um die Zellen der Tabelle / * Parameter Rahmen * /
text-align: center; / * Richtet den Text in die Mitte * /
}
</ Style>
</ Head>
<Body>

<Table width = "200" cellspacing = "0" cellpadding = "2">
<Tr> <td> 0 </ td> <td> X </ td> <td> X </ td> </ tr>
<Tr> <td> 0 </ td> <td> 0 </ td> <td> X </ td> </ tr>
<Tr> <td> X </ td> <td> X </ td> <td> 0 </ td> </ tr>
</ Table>

</ Body>
</ Html>

Der Unterschied zwischen den Grenzen der Tabelle , wenn Sie fügen Sie einen Parameter border-collapse, und ohne sie in Fig. 2.

Fig. 2b ein

Fig. 2b b

Fig. 2. Sehen Sie sich die Tabelle mit dem Attribut border-collapase

Fig. 2a zeigt den Rahmen der Tabelle, die standardmäßig verwendet wird. Beachten Sie, dass in der Tabelle alle Linien, die Dicke zweimal haben. Hinzufügen Parameter border-collapse entfernt diese Funktion, und die Dicke der Linien wird die gleiche (Abb. 2b).

Um Linien des gleichen Typs innerhalb einer Tabelle erstellen, können Sie den anderen Weg gehen. Es sollte an den Wähler <TD> Grenze hinzugefügt werden, aber die Linie nach rechts , um abzubrechen und unten, das entsprechende Attributwert keine Angabe. Dann an ihren Grenzen greift Zellen nicht miteinander überlappen, da nur eine Zeile sein wird. Jedoch ist das Verfahren der Grenzen keine unteren und rechten Linien in der Tabelle selbst zu bilden. Hinzugefügt Parameter border-right und border-bottom dem Wähler <TABLE> wird mit dem rechten Rahmen am Ende (Beispiel 3). Für Einheitlichkeit der Pflege sollte gleich in allen Fällen auf den Stil, Dicke und Farbe der Grenze genommen werden.

Beispiel 3: einen Rahmen aus der Tabelle zu erstellen Attribut Grenze mit

gültig HTML
gültiges CSS
<DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titel> Schaffung eines Rahmens </ title>
<Style type = "text / css">
TABELLE {
border-right: 2px solide grün; / * Border aus der Tabelle auf der rechten Seite * /
border-bottom: 2px solide grün; / * Grenze an der Unterseite des Tisches * /
}

TD {
Grenze: 2px solide grün; um die Zellen der Tabelle / * Parameter Rahmen * /
border-right: none; / * Entfernen Sie nach rechts die Zeile * /
border-bottom: none; / * Nehmen Sie die untere Zeile * /
text-align: center; / * Richtet den Text in die Mitte der Zelle * /
}
</ Style>
</ Head>
<Body>

<Table width = "200" cellpadding = "2">
<Tr> <td> 0 </ td> <td> X </ td> <td> X </ td> </ tr>
<Tr> <td> 0 </ td> <td> 0 </ td> <td> X </ td> </ tr>
<Tr> <td> X </ td> <td> X </ td> <td> 0 </ td> </ tr>
</ Table>

</ Body>
</ Html>

Bei Variationen dieser Methode ist es möglich, zum Beispiel die Wähler <TD> fügen Sie einfach den rechten Rand und unten, und bei <TABLE>, umgekehrt, border - Attribut, aber die Linie nach rechts und unten entfernt hinzuzufügen. In jedem Fall wird das Ergebnis mit dargestellt werden.

Einfache und ursprüngliche Aussehen der Tabelle kann erreicht werden, wenn die Grenzen der Farbe eine passende Hintergrundfarbe zu machen. Aber die Linien sichtbar waren sicher, dass der Hintergrund füllen Sie das Tag <TD> oder <TABLE> zu machen. Dann werden die Tabellenzellen erhalten, wenn seziert Schneider zusammen (Beispiel 4).

Beispiel 4. Verwenden Sie unsichtbare Grenzen in der Tabelle

gültig HTML
gültiges CSS
<DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titel> Erstellen von Grenzen </ title>
<Style type = "text / css">
BODY {
Hintergrund: white; / * Die Hintergrundfarbe der Webseite * /
}

TABELLE {
border-collapse: collapse; / * Die Linie zwischen den Zellen als ein * angezeigt /
}

TD {
border: 2px solid weiß; um die Zellen der Tabelle / * Parameter Rahmen * /
Hintergrund: #ccc; / * Die Hintergrundfarbe der Zelle * /
text-align: center; / * Richtet den Text in die Mitte * /
}
</ Style>
</ Head>
<Body>
<Table width = "200" cellspacing = "0" cellpadding = "2">
<Tr> <td> 0 </ td> <td> X </ td> <td> X </ td> </ tr>
<Tr> <td> 0 </ td> <td> 0 </ td> <td> X </ td> </ tr>
<Tr> <td> X </ td> <td> X </ td> <td> 0 </ td> </ tr>
</ Table>
</ Body>
</ Html>

In diesem Beispiel wird die Hintergrundfarbe einer Webseite durch den Hintergrund - Eigenschaft eingegeben in den Selektor BODY hinzugefügt. Obwohl weiß der Standard ist, ist es manchmal wünschenswert, um anzugeben, dass der Benutzer nicht eine Hintergrundfarbe durch Browser-Einstellungen hat. Die gleiche Farbe sollte sie eindeutig in diesem Fall an den Tabellenzeilen, werden nicht ausgegeben, und nur die Zelle teilen.

Das Ergebnis wird in Beispiel 4 nachstehend gezeigt.

Fig. 3

Fig. 3. Art der Grenzen, die mit der Hintergrundfarbe zusammenfallen

© Erklärung Copyright www.htmlbook.ru