Erstellung von HTML-Tabellen-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

Erstellung von HTML-Tabellen

醉折花枝作酒筹

Apr 30, 2021 am 09:17 AM

html Machen Sie einen Tisch

In diesem Artikel erfahren Sie, wie Sie Tabellen mit HTML erstellen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Erstellung von HTML-Tabellen

Es gibt zwei Möglichkeiten, Tabellen in HTML zu erstellen:

(1) Zeichnen Sie zunächst die Originaltabelle, bei der es sich jeweils um eine einzelne Zelle handelt, und führen Sie dann je nach Bedarf Zeilen oder Spalten zusammen Wenn Sie sowohl Zeilen als auch Zeilen zusammenführen, können Sie es auch in zwei Schritte unterteilen: Zuerst Zeilen zusammenführen und dann Spalten zusammenführen (oder zuerst Spalten zusammenführen und dann Zeilen zusammenführen). Das Löschen von Zellen ist jedoch aufwändiger und leicht zu verwechseln.

(2) Arbeiten Sie direkt gemäß der zu generierenden endgültigen Tabelle, behandeln Sie jede zusammengeführte Zelle als kleine Zelle, teilen Sie sie nicht mehr auf, schreiben Sie dann die Tabelle Zeile für Zeile und stoßen Sie auf zusammengeführte Zellen. Schreiben Sie Colspan oder Rowspan direkt Wenn Sie auf eine zusammengeführte Zelle stoßen, die bereits verwendet wurde, wird diese nicht mehr gezählt. Schauen Sie sich einfach an, wie viele Zellen noch übrig sind. Diese Methode schreibt Zeile für Zeile, ohne dass Zellen gelöscht werden müssen, was klarer ist.

Das Folgende ist ein einfaches Formular und sein Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<h3 align="center">项目增补单</h3>
<table border="1" height="500" width="1000" cellspacing="0" align="center">
	<tr align="center">
    	<td>序号</td>
        <td>维修项目及更换配件</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>工时费</td>
        <td>合计</td>
        <td>故障原因</td>
    </tr>
    <tr align="center">
    	<td>1</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td>2</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td>3</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td>4</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td>5</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td>6</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td rowspan="4">7</td>
        <td></td>
        <td colspan="2" rowspan="4"></td>
        <td rowspan="4"></td>
        <td rowspan="4"></td>
        <td rowspan="4"></td>
        <td rowspan="4"></td>
    </tr>
    <tr align="center">
    	<td></td>
    </tr>
    <tr align="center">
    	<td></td>
    </tr>
    <tr align="center">
    	<td></td>
    </tr>
    <tr >
    	<td colspan="2">备件费用小计：</td>
        <td colspan="5">工时费用小计：</td>
        <td>合计：</td>
    </tr>
    
</table>
<table height="50" width="900" align="center">
	<tr>
		<td>班组长：</td>
        <td>技术部：</td>
        <td>服务顾问：</td>
        <td>客户确认:</td>
	</tr>
</table>
<body>
</body>
</html>

Empfohlenes Lernen: HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonErstellung von HTML-Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

So melden Sie ein Imitationskonto auf Instagram

1 Monate vor By 下次还敢

So ändern Sie die Chatgpt -Persönlichkeit in Einstellungen (Zyniker, Roboter, Hörer, Nerd)

3 Wochen vor By DDD

Wie man in Neon Abyss gegen Eris kämpft

4 Wochen vor By Jack chen

Terminull Brigade: Best <🎜> Build Guide

2 Wochen vor By DDD

Stehlen Sie einen Brainrot Rebirth Guide: Wie es geht und was Sie bekommen

3 Wochen vor By Jack chen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial

1615

276

Setting up and using Magic Mouse in Windows

Related knowledge

Warum wird mein HTML -Bild nicht angezeigt? Aug 16, 2025 am 10:08 AM

Überprüfen Sie zunächst, ob der SRC -Attributpfad korrekt ist, und stellen Sie sicher, dass der relative oder absolute Pfad mit dem Speicherort der HTML -Datei übereinstimmt. 2. Überprüfen Sie, ob der Dateiname und die Erweiterung korrekt geschrieben sind und fallsempfindlich sind. 3. bestätigen Sie, dass die Bilddatei tatsächlich im angegebenen Verzeichnis vorliegt. 4. Verwenden Sie geeignete ALT -Attribute und stellen Sie sicher, dass das Bildformat .jpg, .png, .gif oder .webp ist, das vom Browser weit verbreitet ist; 5. Fehlerbehebung bei Browser -Cache -Problemen, versuchen Sie, die Aktualisierung zu erzwingen oder direkt auf die Bild -URL zuzugreifen. 6. Überprüfen Sie die Berechtigungseinstellungen der Server, um sicherzustellen, dass die Datei gelesen und nicht blockiert werden kann. 7. Stellen Sie sicher, dass die IMG -Tag -Syntax korrekt ist, einschließlich der richtigen Zitate und der Attributreihenfolge, und schließlich beheben Sie 404 Fehler oder Syntaxprobleme über die Browser -Entwickler -Tools, um sicherzustellen, dass das Bild normal angezeigt wird.

So verwenden Sie das BDO -Tag, um die Textrichtung in HTML zu überschreiben Aug 16, 2025 am 09:32 AM

ThebdotagisusedTooverridethebrowrossersDefaultTextDirectionRenderingwhendealingWithmixedleft-to-Rightandright-to-Links-text-CorrectvisualDisplayByforcingaspecificDirectionusectionThedIrAttributeWithvalues "ltr" oder "rtl", asdemonstrattribute

So verwenden Sie das asynchrische Attribut für das Laden des Skripts in HTML Aug 17, 2025 pm 12:52 PM

TheasyncAttributeInHtmlisusedToloadandExexTernaljavaScriptFilesAsynchron und erlaubt theBrowsertodownloadthescriptinParallelWithhtmlParsingandexexecuteImitimed sofort-uponcompletion, welcheimprovespageloadperformanceBypreventReper-Blocker

So legen Sie einen Standardwert für ein HTML -Element ein Aug 17, 2025 pm 01:00 PM

Um den Standardwert für HTMLSelect -Elemente festzulegen, muss das entsprechende Optionselement mit dem ausgewählten Attribut gekennzeichnet sein. 1. Fügen Sie das ausgewählte Attribut der Option hinzu, die Sie standardmäßig auswählen möchten, z. B. UnitedStates. 2. Stellen Sie sicher, dass nur eine Option in einem einzelnen Auswahl das ausgewählte Attribut ausgewählt hat, und wenn mehrere eine vorhanden ist, ist die erste Quellcode -Reihenfolge. 3. Das ausgewählte Attribut kann überall in der Liste platziert werden, nicht auf die erste Option beschränkt. V. 5. Wenn Sie es dynamisch festlegen müssen, können Sie JavaScript verwenden, um das Wert -Attribut wie document.querySelec zu bedienen

So erstellen Sie Index und SuperScript in HTML Aug 20, 2025 am 11:37 AM

TocreateSubscriptandsuperscriptTextinHtml, UsetheAndags.1.usetoformatsubscriptText, Suchasinchemicalformulas -LikeH₂o.2

Was ist das HTML -kleine Element für Aug 16, 2025 am 08:04 AM

Die feindlichen, feinabdruck, orlessmportanter Kontentwithsemanticmeaning, NotjustvisualStyling; 2. ISISAPUTFORCOPYRIGHTNOTICES, LegalDisclacers, Attributions und Limitations;

Wie zentriere ich ein DIV in HTML5? Aug 21, 2025 pm 05:32 PM

Tocenteradivhorizontal, Usemargin: 0AutowithadeFinedwidth.2.ForhorizontalandverticalCentering, ApplyDisplay: Flexontheparent mitjustifiziert-kontent: centeralign-items: center.3.Alternativ, ussecssgridwith-items: centerforbothddDDDDDDirection.4.4.4.Affallback,

So einschränken Sie Dateitypen für eine Upload -Eingabe in HTML Aug 24, 2025 am 02:57 AM

Verwenden Sie das Attribut Akzeptieren, um den Upload -Typ der HTML -Datei zu begrenzen, z. anders, und es wird nur verwendet, um die Verfügbarkeit zu verbessern, anstatt die Serverüberprüfung zu ersetzen.

See all articles