HTML table creation-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML table creation

醉折花枝作酒筹

Apr 30, 2021 am 09:17 AM

html Make a table

This article will introduce to you how to create tables in HTML. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

HTML table creation

There are two ways to create tables in HTML:

(1) First draw the original table, each one is a single cell, Then perform row merging or column merging according to requirements. Some tables need to merge rows and columns, so it is divided into two steps. Merge rows first and then merge columns (or merge columns first and then merge rows). If colspan and By merging rowspan, cells in the same row or column will be deleted, but this method is cumbersome and easy to confuse.

(2) Operate directly according to the final table to be generated, treat each merged cell as a small cell, no longer split it, and then write the table row by row, encounter The merged cells are directly written as colspan or rowspan. If a merged cell that has been used is encountered below, it will no longer be counted, and only how many cells are left will be seen. This method writes line by line without having to delete cells, which is more clear.

The following is a simple form and its 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>

Copy after login

Recommended learning: html video tutorial

The above is the detailed content of HTML table creation. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn