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
How to handle the tcp_mark_head_lost error reported by the Linux system
Problem Description Recently, a host reported the...
Detailed discussion of MySQL stored procedures and stored functions
1 Stored Procedure 1.1 What is a stored procedure...
Tutorial on installing Android Studio on Ubuntu 19 and below
Based on past experience, taking notes after comp...
Vue integrates PDF.js to implement PDF preview and add watermark steps
Table of contents Achieve results Available plugi...
How to build a new image based on an existing image in Docker
Building new images from existing images is done ...
A tutorial for beginners to install and log in to mysql-8.0.19-winx64 (must-read for beginners)
Table of contents 1. Download the installation pa...
Javascript to achieve the effect of closing advertisements
Here is a case study on how to close ads using Ja...
Use Vue3+Vant component to implement App search history function (sample code)
I am currently developing a new app project. This...
Detailed explanation of the solution to keep the content within the container in flex layout
On the mobile side, flex layout is very useful. I...
Detailed explanation of creating stored procedures and functions in mysql
Table of contents 1. Stored Procedure 1.1. Basic ...
Summary of Common Commands for Getting Started with MySQL Database Basics
This article uses examples to describe the common...
In-depth analysis of the slow query problem of MySQL Sending data
Through an example, I shared with you the solutio...
Implementation example of react project from new creation to deployment
Start a new project This article mainly records t...
Modularity in Node.js, npm package manager explained
Table of contents The basic concept of modularity...
Mysql transaction isolation level principle example analysis
introduction You must have encountered this in an...