Brief introduction and usage of Table and div

Web front end 1

Components of the form:

Title Header Body Footer

Table defines a table

<table border="1" cellspacing="0" cellpadding="0" align="center">
</table>

Caption defines the title of the table

<caption>web front end/caption>end 1<

Thead defines the header part

<thead>
				<tr>
					<th>Student Number</th>
					<th>Name</th>
					<th>Gender</th>
					<th>Age</th>
				</tr>
			</thead>

Tbody defines the body of the table

<tbody>
				<tr>
					<td>01</td>
					<td>Zhang San</td>
					<td>Male</td>
					<td>20</td>
				</tr>
				<tr>
					<td>02</td>
					<td>Li Si</td>
					<td>Female</td>
					<td>21</td>
				</tr>
				<tfoot>
					<tr>
						<td colspan="3">Total number of people:</td>
						<td>60</td>
					</tr>
				</tfoot>
			</tbody>

Tfoot defines the table footer, generally used to display summary information

<tfoot>
					<tr>
						<td colspan="3">Total number of people:</td>
						<td>60</td>
					</tr>
				</tfoot>

Tr defines a line

<tr>
					<th>Student Number</th>
					<th>Name</th>
					<th>Gender</th>
					<th>Age</th>
				</tr>

Th td defines data items (cells) th is generally used for table headers and has a bold style

Td is generally used for the main body, without bold style

<tr>
					<td>01</td>
					<td>Zhang San</td>
					<td>Male</td>
					<td>20</td>
				</tr>

Td rowspan and colspan define the number of rows and columns that a cell spans, respectively.

<td colspan="3">Total number of people:</td>

Cellspacing defines the spacing between tables

Cellpadding defines the margins of the table

<table border="1" cellspacing="0" cellpadding="10">

Div defines a division

<div style="width: 200px;height: 200px;background-color:skyblue";>

Features: Display block-level tags in a new line

The difference between block-level tags and inline tags:

Block-level tags take up the entire line. Inline tags are arranged in order from left to right.

Block-level tags: h1-h6 p ul ol li div table dl form

Inline tags: span a br label I em

Characteristics of block-level elements: display:block

• Each block starts on a new line, and the following elements will start on a new line
• The width, height, line height, inner and outer margins of the element are all configurable
• If you don't set the width of an element, it is 100% of its parent container, unless you set the height

Characteristics of inline elements: display: inline

• And other elements are on one line
• You cannot set the width, height, line height, inner and outer margins of an element
• The width of an element is the width of the text or image it contains and cannot be changed.

Characteristics of inline block elements: display: inline-block

• And other elements are on one line
• Width, height, line height, inner and outer margins can all be set

Summarize

This is the end of this article about the introduction and usage of Table and div. For more information about the introduction and usage of Table and div, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!