A brief introduction to the form

Table: table
thead: header
tbody: body content
tfoot: footer
tr: a row
of the table td: a column of the table.
th: A column of the table, but the font of this column will be bold and centered.
Although the table header, body and tail are distinguished in the table, they are omitted in actual use. If you write tr, td and th directly,
if you do not write thead, tbody, and tfoot, the browser will automatically add tbody

border: define the table The width of the border can be written directly on the table tag, and the number can be written directly.
td/th will have a default padding with a size of 1

table. If the width is not defined, it will be stretched by the content by default; after the width and height are written, each column is divided equally.
If the width of a cell (td/th) in the current column changes, the entire column will change.

Margin cannot achieve spacing between table cells.

Table styles:
border-collapse: The borders are collapsed.
Value: collapse-->merge
separate (default value)-->separate. The double border phenomenon occurs when the table defines a border.

Cell properties:
colspan: The number of columns the cell spans.
rowspan: The number of rows that the cell spans vertically.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border-collapse: collapse;
				width: 800px;
				height: 200px;
			}
			td,th{
				padding: 0;
			}
		</style>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>Monday</th>
				<th>Tuesday</th>
				<th>Wednesday</th>
				<th>Thursday</th>
				<th>Friday</th>
			</tr>
			<tr>
				<td colspan="2">张三</td>
				<td rowspan="2">李四</td>
				<td>王五</td>
				<td>赵六</td>
			</tr>
			<tr>
				<td>Zhang San</td>
				<td>Li Si</td>
				<td>王五</td>
				<td>赵六</td>
			</tr>
		</table>
	</body>
</html>

The effect is as follows:

A brief introduction to the form

Guess you like