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
Introduction to Docker Quick Deployment of SpringBoot Project
1. Install Docker First open the Linux environmen...
How to update, package, and upload Docker containers to Alibaba Cloud
This time, we will try to package the running con...
How to use Nginx to prevent IP addresses from being maliciously resolved
Purpose of using Nginx Using Alibaba Cloud ECS cl...
Deep understanding of the mechanism of CSS background-blend-mode
This article is welcome to be shared and aggregat...
HTML table markup tutorial (37): background image attribute BACKGROUND
Set the background image for the table header. Yo...
Detailed steps to store emoji expressions in MySQL
Caused by: java.sql.SQLException: Incorrect strin...
Detailed explanation of the front-end method of passing parameters between HTML pages
A situation that often occurs in a project is tha...
jQuery implements sliding tab
This article example shares the specific code of ...
MySQL uses events to complete scheduled tasks
Events can specify the execution of SQL code once...
Getting Started Tutorial for Beginners⑧: Easily Create an Article Site
In my last post I talked about how to make a web p...
Briefly describe mysql monitoring group replication
Original text: https://dev.mysql.com/doc/refman/8...
How to solve the problem of automatic package update in Debian system
I don't know when it started, but every time ...
Native js implements a minesweeper game with custom difficulty
This article example shares the specific code of ...
Sample code for installing ASPNET.Core3.0 runtime in Linux
# The following examples are for x64-bit runtime ...
Implementation example of react project from new creation to deployment
Start a new project This article mainly records t...