HTML table markup tutorial (1): Creating a table
|
<br />This is a series of tutorials provided by 123WORDPRESS.COM. It is mainly for beginners to explain the application of tables in web pages, including the most basic knowledge, some table skills, etc. We hope you will support 123WORDPRESS.COM. Tables are the best way to arrange content. In HTML pages, most pages are laid out using tables. However, with current technology, some people have proposed using DIV CSS to create web pages. The main purpose is to simplify the code of the web page. Now many sites have implemented the DIV CSS layout, but in the process of web page creation, it is still very necessary for us to learn how to create tables, so I will explain it to you specifically. In the syntax of HTML, tables are mainly composed of three tags: table tag, row tag, and cell tag. As shown in the following table: Table Markup Tag Description <TABLE>…</TABLE> Table Tag <TR>…</TR> Row Tag <TD>…</TD> Cell Tag Basic syntax 01 <TABLE> 02 <TR> 03 <TD> …</TD> 04 … 05 </TR> 06 <TR> 07 <TD> …</TD> 08… 09 </TR> 10…… 11</TABLE> Syntax The <TABLE> tag represents the beginning of the table, the <TR> tag represents the beginning of the row, and the content between <TD> and </TD> is the cell content. The relationship between these tags is from large to small, layer by layer, from the largest table to the smallest cell. A table can have multiple <TR> and <TD> tags, representing multiple rows and multiple cells respectively. File example: 10-1.htm Use the <TABLE>, <TR>, and <TD> tags to create a table with three rows and two columns. 01 <!-- ------------------------------ --> 02 <!-- File example: 10-1.htm --> 03 <!-- File Description: Make a table--> 04 <!-- ------------------------------ --> 05 <HTML> 06 <HEAD> 07 <TITLE>Making a table</TITLE> 08 </HEAD> 09 <BODY> 10 <H1>Mainstream web design software</H1> 11 <TABLE> 12 <TR> 13 <TD>Web Image Software</TD> 14 <TD>Fireworks</TD> 15 </TR> 16 <TR> 17 <TD>Web page creation software</TD> 18 <TD>Dreamweaver</TD> 19 </TR> 20 <TR> 21 <TD>Web animation software</TD> 22 <TD>Flash</TD> 23 </TR> 24 </TABLE> 25 </BODY> 26 </HTML> File description <br />Lines 11 to 24 are a complete table, lines 12 to 15 are the first row of the table, lines 16 to 19 are the second row of the table, and lines 20 to 23 are the third row of the table. |
<<: Installation and usage analysis of Portainer, a visual UI management tool for Docker
>>: Introduction to MySQL <> and <=> operators
Recommend
How to implement HTML Table blank cell completion
When I first taught myself web development, there...
How to use time as a judgment condition in MySQL
Background: During the development process, we of...
A brief discussion on HTML special character encoding CSS3 content: "I am a special symbol"
Some special characters and icons used in the pro...
Vue form input binding v-model
Table of contents 1.v-model 2. Binding properties...
A brief discussion on browser compatibility issues in JavaScript
Browser compatibility is the most important part ...
Windows Service 2016 Datacenter\Stand\Embedded Activation Method (2021)
Run cmd with administrator privileges slmgr /ipk ...
Detailed explanation of the interaction between React Native and IOS
Table of contents Prerequisites RN passes value t...
js to upload pictures to the server
This article example shares the specific code of ...
Detailed steps for Navicat to remotely connect to SQL Server and convert to MySQL
Preface Recently, I encountered a program using S...
CSS3 realizes particle animation effect when matching kings
When coding, you will find that many things have ...
Several ways to hide Html elements
1. Use CSS Copy code The code is as follows: style...
A simple example of MySQL joint table query
MySql uses joined table queries, which may be dif...
Win10 configuration tomcat environment variables tutorial diagram
Before configuration, we need to do the following...
WeChat applet implementation anchor positioning function example
Preface In the development of small programs, we ...
zabbix custom monitoring nginx status implementation process
Table of contents Zabbix custom monitoring nginx ...