Wie Runde Ecken auf HTML-Tabellen

In Hypertext Markup Language (HTML) keine bestimmten Unternehmensbereich oder Tabelle wird standardmäßig mit rechten Winkeln formatiert: alle Formen sind rechteckig. Dies ermöglicht größere Leichtigkeit von Layout und Programmierung. Jedoch besteht gelegentlich ein Bedarf für abgerundete Ecken um Aspekte der einen Seite Stand heraus zu machen. Dieser Prozess erfordert keine spezielle Codierung, sondern vielmehr stützt sich auf die Verwendung von Bildern innerhalb der rechteckigen Standardauslegung.

Anweisungen

Entwerfen von Ecken

1 Beginnen Sie eine neue Datei in Ihrem Bildbearbeitungsprogramm.

2 Erstellen Sie ein kleines quadratisches Bild. Beginnen Sie mit einem 40 x 40 Pixel-Bild heraus. Sie können diese Dimensionen später ändern, wenn Sie größere oder kleinere Kurven wollen. Erstellen Sie einen Kreis, innerhalb dieses Bild.

3 Schattieren Sie das Innere des Kreises mit der gleichen Farbe, die für Ihre Tabelle verwendet werden. Schattieren Sie außen mit der gleichen Farbe, die für den Hintergrund verwendet werden. Wenn Sie einen transparenten Hintergrund haben möchten, schattieren Sie das äußere nicht, aber achten Sie darauf, Ihr Bild als transparente GIF-Datei speichern.

4 Schneiden Sie das Bild in vier Quadranten. Speichern Sie jeder Quadrant als unabhängige Datei. Verwenden Sie einen Dateinamen, der die Position der Ihre Ecke eindeutig festlegt. Beispielsweise, wenn Sie links oben erstellt haben, speichern Sie das Bild als "cornerUL.gif."

HTML

5 Öffnen Sie den Code Ihrer Webseite.

6 Finden Sie die relevanten Tabellen-Tags. Legen Sie die Breite der erste Spalte auf die Pixelbreite des Bilds Ecke. Geben Sie beispielsweise, wenn Ihre Ecke ein 20 x 20 Pixel großes Bild ist, das folgende Attribut:

< td Width = "20" >

7 Geben Sie die entsprechenden erste Zelle in der ersten Spalte < Img >-Tag. Das Ecke Bild macht sich den Inhalt dieser Zelle. Stellen Sie die Attribute des Bildes entsprechen die gewünschten Abmessungen und Festlegen der Rahmen gleich 0. Zum Beispiel:

< td Width = "20" >< Img src="cornerUL.gif" Border = "0" Width = "20" Height = "20" >< / td >

8 Geben Sie ähnliche < Img >-Tags für jede der anderen Ecke Zellen. Die entsprechenden Zeilen und Spalten dieser Zellen bilden die Grenze Ihrer Tabelle.

Tipps & Warnungen

• Variieren Sie die Abmessungen des Ihr Originalbild (und die entsprechenden breiten Ihre Zellen) für größere oder kleinere Ecken.