Detaillierte Einführung in die Einrichtung von Tabellen in HTML

Im Webdesign sind Tabellen eine häufig verwendete Formatierungsmethode, mit der Daten organisiert und angezeigt werden können. In HTML werden Tabellen über Tags definiert und eingerichtet. Im Folgenden wird detailliert beschrieben, wie Tabellen in HTML eingerichtet werden.

1. Erstellen Sie eine Tabelle

In HTML wird eine Tabelle durch das Tag <table> definiert. Eine einfache Tabelle kann mit dem folgenden Code erstellt werden: <table> 标签来定义的。可以通过以下代码来创建一个简单的表格：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

上面的代码中，使用了 <table> 标签来定义表格，使用 <tr> 标签来定义表格的行，使用 <td> 标签来定义表格的单元格。其中，<td> 表示单元格的内容，每个 <td> 标签表示一个单元格。

二、设置表格的边框

在 HTML 中，可以通过设置表格的边框来改变表格的外观。可以通过设置 <table> 标签的 border 属性来改变表格的边框大小。代码如下：

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

上面的代码中，设置了 border 属性为 1，表示表格的边框大小为 1 像素。

三、设置表格的宽度和对齐方式

可以通过设置 <table> 标签的 width 属性来改变表格的宽度。代码如下：

<table border="1" width="50%">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

上面的代码中，设置了 width 属性为 50%，表示表格宽度占父元素的 50%。

可以通过设置 <table> 标签的 align 属性来改变表格的对齐方式。代码如下：

<table border="1" width="50%" align="center">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

上面的代码中，设置了 align 属性为 center，表示表格水平居中对齐。

四、设置表格的背景色和字体颜色

可以通过设置 <table> 标签的 bgcolor 属性来改变表格的背景色。代码如下：

<table border="1" width="50%" align="center" bgcolor="#E6E6FA">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

上面的代码中，设置了 bgcolor 属性为 #E6E6FA，表示表格的背景色为淡紫色。

可以通过设置 <td> 标签的 color 属性来改变字体颜色。代码如下：

<table border="1" width="50%" align="center" bgcolor="#E6E6FA">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

上面的代码中，设置了 <td> 标签的 color 属性为 redrrreee

Im obigen Code wird das Tag <table> verwendet, um die Tabelle zu definieren, und &lt ;tr&gt ;-Tags zum Definieren von Tabellenzeilen und <td>-Tags zum Definieren von Tabellenzellen. Unter diesen repräsentiert <td> den Inhalt der Zelle und jedes <td>-Tag repräsentiert eine Zelle.

2. Legen Sie den Rand der Tabelle fest.

In HTML können Sie das Erscheinungsbild der Tabelle ändern, indem Sie den Rand der Tabelle festlegen. Sie können die Rahmengröße der Tabelle ändern, indem Sie das Attribut border des Tags <table> festlegen. Der Code lautet wie folgt: #🎜🎜#rrreee#🎜🎜#Im obigen Code ist das Attribut border auf 1 gesetzt, was bedeutet, dass die Rahmengröße der Tabelle 1 Pixel beträgt. #🎜🎜##🎜🎜#3. Legen Sie die Breite und Ausrichtung der Tabelle fest. #🎜🎜##🎜🎜# Sie können das width-Attribut des <table> festlegen. Code>-Tag, um die Breite der Tabelle zu ändern. Der Code lautet wie folgt: #🎜🎜#rrreee#🎜🎜#Im obigen Code ist das Attribut width auf 50 % gesetzt, was bedeutet, dass die Tabellenbreite 50 % des übergeordneten Elements einnimmt. #🎜🎜##🎜🎜#Sie können die Ausrichtung der Tabelle ändern, indem Sie das align-Attribut des <table>-Tags festlegen. Der Code lautet wie folgt: #🎜🎜#rrreee#🎜🎜#Im obigen Code ist das Attribut align auf center gesetzt, was bedeutet, dass die Tabelle horizontal ausgerichtet ist das Zentrum. #🎜🎜##🎜🎜# 4. Legen Sie die Hintergrundfarbe und die Schriftfarbe der Tabelle fest. #🎜🎜##🎜🎜# Sie können den bgcolor des <table> tag Eigenschaft zum Ändern der Hintergrundfarbe der Tabelle. Der Code lautet wie folgt: #🎜🎜#rrreee#🎜🎜#Im obigen Code ist das Attribut bgcolor auf #E6E6FA gesetzt, was bedeutet, dass die Hintergrundfarbe von Der Tisch ist lavendelfarben. #🎜🎜##🎜🎜#Sie können die Schriftfarbe ändern, indem Sie das Attribut color des Tags <td> festlegen. Der Code lautet wie folgt: #🎜🎜#rrreee#🎜🎜#Im obigen Code ist das Attribut color des Tags <td> auf gesetzt red , was angibt, dass die Schriftfarbe Rot ist. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#Im Webdesign sind Tabellen eine gängige Layoutmethode, die zum Organisieren und Anzeigen von Daten verwendet werden kann. In HTML werden Tabellen über Tags definiert und eingerichtet. In diesem Artikel wird die Methode zum Festlegen von Tabellen in HTML unter den Gesichtspunkten des Erstellens von Tabellen, Festlegen des Rahmens, der Breite und Ausrichtung der Tabelle, Festlegen der Hintergrundfarbe und Schriftfarbe der Tabelle usw. vorgestellt. Ich hoffe, es kann den Lesern helfen, die Verwendung von HTML-Tabellen besser zu verstehen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Einrichtung von Tabellen in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!