A brief analysis of the 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/caption>end 1<

Thead defines the part of the header

 <thead>
				<tr>
					<th>Student ID 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>李思</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 footer of the table, usually 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 ID 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 part, without bold style

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

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

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

Cellspacing defines the spacing of 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";>

Feature: Display block-level labels on a new line

The difference between block-level tags and inline tags:

Block-level tags occupy the entire row. Inline tags will be arranged in order from left to right.

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

Inline label: span a br lable I em

Characteristics of block-level elements: display:block

Each block starts from a new line, and subsequent elements will start a new line. The width, height, line height, and inner and outer margins of the element are all settable. If the width of the element is not set, it will be 100% of its parent container, unless You set the height for him

Characteristics of inline elements: display: inline

They are all on the same line as other elements. The width, height, line height, and inner and outer margins of the element cannot be set. The width of the 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 all on the same line. The width, height, line height, and inner and outer margins can all be set.

Summarize

This concludes this article about the brief introduction and usage of Table and div. For more information about the introduction and usage of Table and div, please search previous articles on downcodes.com or continue to browse the following related articles. Hope Please support downcodes.com more in the future!