Exemplarische Vorgehensweise: Bearbeiten von HTML-Tabellen in Visual Web Developer

Aktualisiert: November 2007

Das Bearbeiten von Tabellen ist ein wichtiger Bestandteil zahlreicher Webseiten, da das Seitenlayout mit Tabellen erstellt wird. Diese exemplarische Vorgehensweise veranschaulicht die Features zur Tabellenbearbeitung im HTML-Editor in Microsoft Visual Studio. Sie erstellen mit Tabellen das Layout für ein einfaches Eingabeformular auf der Seite.

Hinweis:
Die in dieser exemplarischen Vorgehensweise beschriebenen Features beziehen sich auf HTML-Tabellen, nicht auf das Table-Webserver-Steuerelement (das <asp:Table>-Steuerelement und seine untergeordneten Steuerelemente).

Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

• Hinzufügen einer Tabelle.

• Auswählen von Tabelle, Zeilen und Spalten.

• Ändern der Größe von Elementen.

• Hinzufügen und Entfernen von Tabellenelementen.

• Festlegen von Zelleigenschaften, z. B. Hintergrundfarbe und Ausrichtung.

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

• Visual Web Developer und .NET Framework.

Erstellen der Website

Wenn Sie bereits eine Website in Visual Studio erstellt haben (beispielsweise mithilfe des Verfahrens in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer), können Sie diese Website verwenden und zum nächsten Abschnitt, "Erstellen des Seitenlayouts mit einer Tabelle", übergehen. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

1. Öffnen Sie Visual Web Developer.

2. Klicken Sie im Menü Datei auf Neue Website.

3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

4. Geben Sie im Feld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

   Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.

5. Klicken Sie in der Liste Sprache auf die Programmiersprache, in der Sie arbeiten möchten.

6. Klicken Sie auf OK.

   Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.

Erstellen des Seitenlayouts mithilfe einer Tabelle

Zunächst fügen Sie eine Tabelle hinzu, in der das Gesamtlayout der Seite definiert wird.

So fügen Sie eine Tabelle für das Seitenlayout hinzu

1. Wenn Sie nicht bereits eine Seite im Designer geöffnet haben, fügen Sie der Website eine Seite hinzu.

2. Wechseln Sie in die Entwurfsansicht.

3. Klicken Sie im Menü Layout auf Tabelle einfügen.

   Das Dialogfeld Tabelle einfügen wird angezeigt.

4. Wählen Sie Vorlage aus.

   Bei Tabellenvorlagen handelt es sich um vordefinierte Tabellenlayouts.

5. Wählen Sie in der Liste Vorlage die Option Header und Seite aus.

6. Klicken Sie auf OK.

   Der Seite wird eine zweispaltige Tabelle hinzugefügt, die die gesamte Höhe und Breite der Seite einnimmt. Eine Zelle erstreckt sich oben über die Spalten. Hier kann eine Überschrift eingefügt werden. Die Zelle links unter der Überschrift ist für Navigations- oder Seiteninformationen bestimmt. Die Zelle rechts unter der Überschrift ist der Hauptanzeigebereich für die Seite.

   Hinweis:
   Die Rahmen um die Zellen in der Tabelle werden standardmäßig zur Entwurfszeit angezeigt, um Ihnen das Bearbeiten zu erleichtern. Beim Anzeigen der Tabelle im Browser wird nur dann ein Rahmen angezeigt, wenn Sie dies explizit für die Tabelle oder die Zellen festgelegt haben.

Erstellen eines Formularlayouts mit einer Tabelle

Sie können für das Layout der Steuerelemente in einem Formular auch HTML-Tabellen verwenden. Sie erstellen jetzt eine zweite Tabelle in der ersten Tabelle. Später erstellen Sie mithilfe der zweiten Tabelle das Layout für einige Steuerelemente in einem Formular.

So fügen Sie dem Formularlayout eine Tabelle hinzu

1. Ziehen Sie aus der Gruppe HTML der Toolboxein Table-Element in die Hauptzelle auf der rechten Seite.

   Wenn Sie eine Tabelle aus der Toolbox ziehen, erstellt Visual Web Developer eine leere Tabelle mit drei Spalten und drei Zeilen. Sie benötigen nur zwei Spalten. Sie löschen daher gleich eine der Spalten.

   Hinweis:
   Sie können Tabellen mit dem Befehl Tabelle einfügen erstellen oder wie zuvor hierzu ein Table-Element aus der Toolbox ziehen.

2. Bewegen Sie den Mauszeiger über die Tabelle, bis der Zeiger als Zeiger zum Verschieben (Pfeil mit vier Spitzen) angezeigt wird, und klicken Sie anschließend, um die Tabelle auszuwählen.

3. Ziehen Sie die rechte Seite der Tabelle, um die Breite der Tabelle zu erhöhen, bis sie fast die Breite der Seite einnimmt.

   Beim Ziehen wird die Tabelle mit den aktuellen Dimensionen angezeigt.

4. Klicken Sie mit der rechten Maustaste in eine der Zellen in der am weitesten links stehenden Spalte. Klicken Sie im Untermenü Löschen auf Spalten, um die Spalte der ausgewählten Zelle zu entfernen.

   Die Spalte wird in der Tabelle gelöscht.

   Hinweis:
   Wenn die Option Löschen angezeigt wird, diese jedoch nicht über Untermenü verfügt, wird damit angezeigt, dass sich der Fokus nicht auf einer Zelle befindet. Klicken Sie mit der rechten Maustaste in ein Zelle in der linken Spalte.

5. Klicken Sie in die Zelle rechts unten, und drücken Sie dann die TAB-TASTE, um der Tabelle eine vierte Zeile hinzuzufügen.

   Sie verfügen jetzt über eine Tabelle mit zwei Spalten und vier Zeilen, die als Container für Ihre Fomularsteuerelemente verwendet werden können.

Festlegen von Eigenschaften für die Seitenlayouttabelle

Sie verfügen nun über eine Formularlayouttabelle in der Seitentabelle und können das Layout der Seite durch Bearbeiten der Seitenlayouttabelle fertig stellen.

So legen Sie die Eigenschaften der Seitenlayouttabelle fest

1. Klicken Sie in der Seitenlayouttabelle in die oberste Zelle.

   Der dickere Rahmen um die Zelle gibt an, dass sie ausgewählt ist und sich im Inhaltsbearbeitungsmodus befindet.

2. Klicken Sie im Eigenschaftenfenster auf die Schaltfläche im Feld Stil.

   Das Dialogfeld Stil-Generator wird angezeigt.

3. Klicken Sie auf der Registerkarte Text in der Liste Horizontal auf Zentriert.

4. Wählen Sie auf der Registerkarte Hintergrund in der Liste Farbe eine Farbe aus, die Ihnen zusagt. Sie können auch auf die Schaltfläche neben dem Feld Farbe klicken, um das Dialogfeld Farbauswahl anzuzeigen und aus weiteren Farben auszuwählen.

   Die von Ihnen vorgenommenen Einstellungen legen den Stil der Zelle oben in der Layouttabelle fest.

5. Geben Sie als Überschrift Contoso Web Site ein.

6. Wählen Sie den Text aus, und klicken Sie auf der Symbolleiste Formatierung in der Liste Blockformat auf Überschrift 1 < H1 >.

7. Wiederholen Sie die Schritte 1 bis 6 für die am weitesten links stehende Zelle in der Tabelle, und berücksichtigen Sie dabei die folgenden Änderungen:

   • Ändern Sie den Text in This site is maintained by Contoso, Incorporated

   • Formatieren Sie den Text nicht als Überschrift 1.

   • Klicken Sie im Dialogfeld Stil-Generator auf der Registerkarte Text in der Liste Vertikal auf Unten.

   Auf einer Produktionswebseite würde in der Zelle auf der linken Seite vermutlich ein Menü mit Links oder anderer Inhalt angezeigt. Für diese exemplarische Vorgehensweise ist es jedoch nicht relevant, was die Zelle enthält.

Erstellen des Formulars

Sie können jetzt das Formular erstellen.

So fügen Sie der Formularlayouttabelle Text und Steuerelemente hinzu

1. Klicken Sie in der Formularlayouttabelle (die Tabelle in der Seitenlayouttabelle) in die obere linke Zelle, und geben Sie Name: ein.

2. Klicken Sie in die linke Zelle in der zweiten Zeile, und geben Sie Birth year: ein.

3. Ziehen Sie aus der Gruppe Standard der Toolbox ein TextBox-Steuerelement in die oberste rechte Zelle.

4. Legen Sie die ID-Eigenschaft des TextBox-Steuerelements auf textName fest.

5. Ziehen Sie ein weiteres TextBox-Steuerelement in die rechte Zelle der zweiten Zeile, und legen Sie seine ID-Eigenschaft auf textBirthYear fest.

6. Ziehen Sie ein Button-Steuerelement in die dritte Zelle auf der rechten Seite, und legen Sie seine Text-Eigenschaft auf Senden fest.

7. Ziehen Sie ein Label-Steuerelement in die untere rechte Zelle, legen Sie die ID-Eigenschaft auf labelDisplay fest, und löschen Sie die Text-Eigenschaft.

8. Platzieren Sie den Mauszeiger über der linken Spalte, bis ein Auswahlsymbol (ein kleines Rechteck) oben in der Spalte angezeigt wird, und klicken Sie dann auf das Symbol.

   Die linke Spalte wird ausgewählt.

9. Klicken Sie im Eigenschaftenfenster auf die Schaltfläche im Feld Stil, um das Dialogfeld Stil-Generator anzuzeigen.

10. Klicken Sie auf der Registerkarte Text in der Liste Horizontal auf Rechts.

    Die Textbeschriftungen im Formular werden rechtsbündig ausgerichtet.

11. Klicken Sie auf OK, um den Stil-Generator zu schließen.

12. Wählen Sie die linke Spalte erneut aus, und ziehen Sie die rechte Ecke, bis die Spalte so klein ist, der Beschriftungstext gerade hineinpasst.

13. Klicken Sie mit der rechten Maustaste in die Layouttabellenzelle außerhalb der Formularlayouttabelle, und klicken Sie anschließend auf Stil.

    Sie können das Dialogfeld Stil-Generator auch mithilfe des Kontextmenüs anzeigen.

14. Klicken Sie auf der Registerkarte Text in der Liste Vertikal auf Oben.

    Die Formularlayouttabelle wird am oberen Rand der Zelle ausgerichtet.

Programmieren der Formularsteuerelemente

Sie können jetzt die Formularsteuerelemente programmieren. Im Formular wird angezeigt, wie alt der Benutzers dieses Jahr wird.

So programmieren Sie die Formularsteuerelemente

1. Doppelklicken Sie im Formular auf das Button-Steuerelement.

   Der Editor erstellt einen Click-Ereignishandler.

2. Fügen Sie den folgenden hervorgehobenen Code hinzu.

   Protected Sub Button1_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs) _
       Handles Button1.Click 
       Dim age As Integer    age = DateTime.Now.Year - CInt(textBirthYear.Text)    labelDisplay.Text = Server.HtmlEncode(textName.Text) & _        ", this year you are " & Server.HtmlEncode(age.ToString())
   End Sub
   

   protected void Button1_Click(Object sender, EventArgs e)
   {
       int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text);    labelDisplay.Text = Server.HtmlEncode(textName.Text) +     ", this year you are " + Server.HtmlEncode(age.ToString());
   }
   

Testen der Seite

Sie können die Seite jetzt testen.

So testen Sie die Seite

1. Drücken Sie STRG+F5, um die Seite auszuführen.

   Wenn die Seite im Browser angezeigt wird, können Sie das von Ihnen erstellte Layout betrachten. Da Sie Tabellenrahmen nicht explizit angegeben haben, enthält das Formular kein Raster.

2. Geben Sie im Feld Name Ihren Namen ein.

3. Geben Sie im Feld Birth year Ihr Geburtsjahr ein, und klicken Sie auf die Schaltfläche Senden.

   Die Altersberechnung wird im Formular an der Position angezeigt, die Sie mit der Formulartabelle erstellt haben.

Nächste Schritte

In dieser exemplarischen Vorgehensweise haben Sie einige der Funktionen des visuellen Tabelleneditors in der Entwurfsansicht kennen gelernt. Sie haben mit zwei Methoden Tabellen hinzugefügt, die Größe einer Tabelle geändert, eine Zeile hinzugefügt, eine Spalte gelöscht, Zellstile festgelegt und Text und Steuerelemente als Zellinhalt hinzugefügt. Hier einige Vorschläge:

• Erfahren Sie mehr zum Arbeiten mit Tabellen. Einzelheiten finden Sie unter:

  • Gewusst wie: Hinzufügen und Entfernen von Table-Elementen (HTML) in Visual Web Developer

  • Gewusst wie: Auswählen von HTML-Tabellenelementen und -inhalten in Visual Web Developer

  • Gewusst wie: Ändern der Größe von HTML-Tabellenelementen in Visual Web Developer

• Tipps zum Bearbeiten von Tabellen in der Entwurfsansicht und der Quellansicht. Ausführliche Informationen finden Sie unter Tipps zum Bearbeiten von HTML-Tabellen in Visual Web Developer.

• Hinzufügen einer Validierung zum Textfeld Birth year, damit Benutzer nur gültige Jahre eingeben können. Weitere Informationen hierzu finden Sie unter Überprüfen der Benutzereingabe in ASP.NET-Webseiten.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erstellen und Verwenden von ASP.NET-Masterseiten in Visual Web Developer

Konzepte

Tag-Navigation im HTML-Editor von Visual Web Developer

Formatieren von Elementen im HTML-Editor von Visual Web Developer