Création de tableaux HTML-tutoriel HTML-php.cn

Création de tableaux HTML

醉折花枝作酒筹

Libérer： 2021-04-30 09:18:03

avant

6039 Les gens l'ont consulté

Cet article vous présentera comment créer des tableaux en HTML. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Création de tableaux HTML

Il existe deux façons de créer des tableaux en HTML :

(1) Dessinez d'abord le tableau d'origine, chacun est une seule cellule, puis effectuez une ligne fusion ou fusion de colonnes selon les besoins. Certaines tables doivent fusionner des lignes et des colonnes, elles sont donc divisées en deux étapes. Fusionner d'abord les lignes, puis fusionner les colonnes (ou fusionner d'abord les colonnes, puis fusionner les lignes). les cellules de la même ligne ou colonne seront supprimées, mais cette méthode est lourde et facile à confondre.

(2) Opérer directement selon le tableau final à générer, traiter chaque cellule fusionnée comme une petite cellule, ne plus la diviser, puis écrire le tableau ligne par ligne, rencontre Les cellules fusionnées sont directement écrites comme colspan ou rowspan Si une cellule fusionnée qui a été utilisée est rencontrée ci-dessous, elle ne sera plus comptée et seul le nombre de cellules restantes sera vu. Cette méthode écrit ligne par ligne sans avoir à supprimer de cellules, ce qui est plus clair.

Ce qui suit est un formulaire simple et son 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>

Copier après la connexion

Apprentissage recommandé : Tutoriel vidéo html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!