Web front end 1
Student number | Name | gender | age |
01 | Zhang San | male | 20 |
02 | John Doe | female | twenty one |
Total number of people | 60 | ||
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!