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
User experience of portal website redesign
<br />From the launch of NetEase's new h...
A brief discussion on MySql views, triggers and stored procedures
view What is a view? What is the role of a view? ...
VMware12.0 installation Ubuntu14.04 LTS tutorial
I have installed various images under virtual mac...
Why Use DOCTYPE HTML
You know that without it, the browser will use qui...
Detailed explanation of HTML style tags and related CSS references
HTML style tag style tag - Use this tag when decl...
Implementation of react routing guard (routing interception)
React is different from Vue. It implements route ...
Understanding v-bind in vue
Table of contents 1. Analysis of key source code ...
Introduction to possible problems after installing Tomcat
1. Tomcat service is not open Enter localhost:808...
How to run postgreSQL with docker
1. Install Docker. Reference URL: Docker Getting ...
JS operation object array to achieve add, delete, modify and query example code
1. Introduction Recently, I helped a friend to ma...
A brief analysis of Linux to check the firewall status and the status of the ports open to the outside world
1. Check the firewall status Check the firewall s...
Detailed explanation of Vue's TodoList case
<template> <div id="root"> ...
How to delete node_modules and reinstall
Table of contents Step 1: Install node_modules in...
Html and CSS Basics (Must Read)
(1) HTML: HyperText Markup Language, which mainly...
Ideas and practice of multi-language solution for Vue.js front-end project
Table of contents 1. What content usually needs t...