Detailed explanation of HTML table tags (suitable for beginners)
|
TABLE> <TR> <TD> <TH> <CAPTION> ■ <TABLE> <TR> <TD>: These three tags are the most important tags for defining a table. It can be said that learning only these three is enough. <TABLE> is a container tag, which means that it is used to declare that this is a table and other table tags are only applicable within its scope. There are other container tags as well. <TR> is used to mark table rows. <TD> is used to mark the storage cell Parameter settings for <TABLE> (commonly used): For example: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2"> width="400" Table width, accepts absolute values (such as 80) and relative values (such as 80%). border="1" Table border thickness. Different browsers have different default values, so please specify. cellspacing="2" Table grid thickness. Please see Example 3, which shows the grid thickened to 5. cellpadding="2" The distance between text and grid lines. Please see Example 4, where the padding is added to 10. align="CENTER" The placement position of the table (horizontally). The optional values are: left, right, center. Please see example 5 or 6. The table is placed in the middle. In order to prevent some browsers from supporting it, the center tag <CENTER> is added. This is just a multi-layer guarantee. Of course, only <CENTER> is also acceptable. valign="TOP". The vertical placement position of calligraphy and painting in the table. The optional values are: top, middle, bottom. background="myweb.gif" Do not use table paper with bgcolor. bgcolor="#0000FF" Table background color. Do not use it together with background. Please see example 6. bordercolor="#FF00FF" Table border color, NC and IE have different effects, please see example six. bordercolorlight="#00FF00" For the color of the light-facing part of the table border, see Example 2. 『Only for IE』 bordercolordark="#00FFFF" The color of the backlit part of the table border. Please see Example 2. When bordercolorlight or bordercolordark is used, bordercolor will be invalid. 『Only for IE』 cols="2" The number of table fields only allows the browser to draw the entire table before downloading it. Parameter settings of <TR> (commonly used): For example: <tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000"> align="RIGHT" The horizontal placement position of calligraphy and painting in this column. The optional values are: left, center, right. valign="MIDDLE" The vertical placement position of calligraphy and painting in this column. The optional values are: top, middle, bottom. bgcolor="#0000FF" For the background color of this column, please see Example 5. bordercolor="#FF00FF" For the border color of this column, please see example 3. 『Only for IE』 bordercolorlight="#808080" The color of the light-facing part of the column border, see example 3. 『Only for IE』 bordercolordark="#FF0000" The color of the backlit part of the border of this column. Please see Example 3. When bordercolorlight or bordercolordark is used, bordercolor will be invalid. 『Only for IE』 Parameter settings of <TD> (commonly used): For example: <td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> width="48%" The cell width accepts both absolute values (such as 80) and relative values (such as 80%). height="400" The height of the storage cell. colspan="5" The number of columns to open to the right of the cell. Please see example 6 rowspan="4" The number of rows that the cell opens down. Please see example 6 align="RIGHT" The horizontal position of the calligraphy or painting in this storage cell. The optional values are: left, center, right. valign="BOTTOM" The vertical placement position of the calligraphy or painting in this storage cell. The optional values are: top, middle, bottom. bgcolor="#FF00FF" For the background color of this cell, please see Example 4. bordercolor="#808080" The border color of this cell, please see example 3. 『Only for IE』 bordercolorlight="#FF0000" The color of the light-facing part of the cell border. See Example 3. 『Only for IE』 bordercolordark="#00FF00" The color of the backlight part of the cell border. Please see Example 3. When bordercolorlight or bordercolordark is used, bordercolor will be invalid. 『Only for IE』 background="myweb.gif" This storage grid paper, use either bgcolor. Example 1: <table width="60%" border="1"> <tr><td>A table with only one cell</td></tr> Example 2 of a table showing results with only one cell: <table width="60%" border="5" bordercolorlight="#FF00FF" bordercolordark="#FF0000"> <tr><td>First column, first column</td><td>First column, second column</td></tr> </table> Display results Column 1 Column 1 Column 1 Column 2 Example 3: <table width="60%" border="1" cellspacing="5"> <tr bordercolor="#0000FF"> <td>First column, first row</td> <td>First column, second row</td> </tr> <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00"> <td>Second column, first column</td> <td>Second column, second column</td> </tr> </table> Display results 1st column 1st column 1st column 2nd column 2nd column 1st column 2nd column Example 4: <table width="60%" border="1" cellpadding="10"> <tr> <td bgcolor="#FFCCE6">First column, first row</td> <td bgcolor="#FFFFC6">First column, second row</td> </tr> <tr> <td bgcolor="#FFD9FF">Second column, first column</td> <td bgcolor="#DAB4B4">Second column, second column</td> </tr> </table> Display results First column First column First column Second column Second column First column Second column Example 5: Source code <center> <table width="60%" cellspacing="0" cellpadding="2" align="CENTER"> <tr> <td bgcolor="#FFD2E9">First column, first row</td> <td bgcolor="#FFDAB5">First column, second row</td> <td bgcolor="#FFFFB5">First column, third row</td> </tr> <tr bgcolor="#C0C0C0"> <td>Second column, first column</td> <td>Second column, second column</td> <td>Second column, third column</td> </tr> </table> </center> Display results Example 6 Source code <center> <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF"> <tr> <td>First row, first column</td> <td colspan="2">First row, second and third columns</td> </tr> <tr> <td rowspan="2">First column of the second and third rows</td> <td>Second row, second column</td> <td>Second row, third column</td> </tr> <tr> <td>Column 3, Column 2</td> <td>Column 3, Column 3</td> </tr> </table> </center> Display results ■ <TH>: <TH> and <TD> both mark a cell, the only difference is that the text in the cell marked by <TH> appears in bold. It is usually used in the first row of a table to mark columns. Its usage is to replace the position of <TD>. For its parameter setting, please refer to <TD>. Of course, if you add a bold mark <B> to the text in the cell marked by <TD>, it will have the same effect as <TH>. Example: Source code <center> <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER"> <tr align="CENTER"> <th>Month</th><th>% of IE visitors</th><th>% of NC visitors</th> </tr> <tr align="CENTER"> <td>August</td><td>61%</td><td>39%</td> </tr> <tr align="CENTER"> <td>July</td><td>54%</td><td>46%</td> </tr> <tr align="CENTER"> <td>June</td><td>52%</td><td>48%</td> </tr> </table> </center> Display results ■ <CAPTION> ： The function of <CAPTION> is to mark a title column for the table, just like adding a non-gridlined open column above the table. Of course, it can also be placed below, usually used to store the title of the table. Parameter settings of <CAPTION> (commonly used): For example: <caption align="TOP" valign="TOP"></caption> align="TOP" The horizontal position of the table caption relative to the table. The possible values are: left, center, right, top, middle, bottom. If align="bottom", the caption will appear below the table, no matter if you put the <caption> at the beginning or end of the <table> in the source code. valign="TOP" The position of the table title column relative to the table (up or down). The optional values are: top, bottom. This is the same as align="TOP" or align="BOTTOM". Although the functions are repeated, if you want the title column to be placed at the bottom and pasted to the right or left, then both parameters can be used. When there is only one parameter, please prefer align, because valign is a parameter that was only introduced in HTML 3.0. example: <center> <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER"> <caption>Web Express August Visitors’ Browser Usage Analysis</caption> <tr align="CENTER"> <th>Month</th> <th>% of IE visitor</th> <th>% of NC visitor</th> </tr> <tr align="CENTER"> <td>August</td> <td>61%</td> <td>39%</td> </tr> </table> </center> |
<<: Vue implements automatic jump to login page when token expires
Recommend
Kill a bunch of MySQL databases with just a shell script like this (recommended)
I was woken up by a phone call early in the morni...
Samba server configuration under Centos7 (actual combat)
Samba Overview Samba is a free software that impl...
Syntax alias problem based on delete in mysql
Table of contents MySQL delete syntax alias probl...
Vue scroll down to load more data scroll case detailed explanation
vue-infinite-scroll Install npm install vue-infin...
Solution to the problem that the mysql8.0.11 client cannot log in
This article shares with you the solution to the ...
Summary of Mysql table, column, database addition, deletion, modification and query problems
The following is some basic sql knowledge I have ...
Learn one minute a day to use Git server to view debug branches and fix them
Debug branch During the normal development of a p...
Comprehensive website assessment solution
<br />Sometimes you may be asked questions l...
When writing HTML links, always add forward slashes to subfolders to reduce HTTP requests
Because if there is no forward slash at the end of...
Sample code for automatic web page refresh and automatic jump
Automatic web page refresh: Add the following code...
Detailed process of installing Docker, creating images, loading and running NodeJS programs
System environment: Windows 7 1. Install Docker D...
How to use JavaScript to get the most repeated characters in a string
Table of contents topic analyze Objects of use So...
The perfect solution for highlighting keywords in HTML
I recently encountered a feature while working on...
Summary of React's way of creating components
Table of contents 1. Create components using func...