XHTML introductory tutorial: Application of table tags
|
<br />Table is an awkward tag in XHTML, so you only need to understand it in this section. Before CSS became popular, tables were widely used for positioning. In XHTML, tables are not recommended for positioning, and W3C hopes that CSS can replace <table> in positioning. However, in fact, since using CSS layout often requires a lot of hand-written code (common web design software such as Dreamweaver does not perfectly support the display of div), <table> is still used by many websites for homepage layout. For example, Google's More products page uses table for positioning. However, I personally recommend that you start using CSS to position your pages, as this is the direction the web is heading. Of course, replacing tables with CSS may cause you a lot of trouble in the early stages. Table Tag <table> In XHTML, the tag for creating a table is <table>. When writing the code, we first use the <tr> tag to divide the table into rows, and then use the <td> tag to divide each row into cells. It is very difficult and inefficient to create a table entirely by handwriting code. However, creating a table in a web page creation software is as easy as in Word. You only need to select simple properties such as rows and columns. However, we may encounter the possibility that the automatically generated table does not meet the requirements and needs to be adjusted in code mode, so we still need to have a general understanding of the specific writing methods of XHTML table tags. Table border properties The <table> tag can have a border attribute. If you do not set a value for the border property, the browser will not display the table border by default. Table Exercise Let's create a label with four rows and two columns. The code is as follows: <table border="1"> <tr> <td>a grid</td> <td>a grid</td> </tr> <tr> <td>a grid</td> <td>a grid</td> </tr> <tr> <td>a grid</td> <td>a grid</td> </tr> <tr> <td>a grid</td> <td>a grid</td> </tr> </table> The displayed results are as follows: Note the code above, there are 4 pairs of <tr>, corresponding to the 4 rows below. And each <tr> (row) has two <td> cells. So it becomes a table with 4 rows and 2 columns. A table with grids like this is sufficient for listing data and other information, but tables used for positioning are usually more complicated. Once again, we emphasize that we do not recommend using tables for positioning, so here we only briefly introduce <table>. |
<<: jQuery implements breathing carousel
>>: Docker-compose quickly builds steps for Docker private warehouse
Recommend
Pitfall notes of vuex and pinia in vue3
Table of contents introduce Installation and Usag...
Summary of essential knowledge points for MySQL query optimization
Preface Query optimization is not something that ...
Example code for implementing a circular trajectory animation using CSS3 and table tags
html: In fact, it is to arrange several solid cir...
VMware Workstation 14 Pro installation Ubuntu 16.04 tutorial
This article records the specific method of insta...
How to design high-quality web pages Experience in designing high-quality web pages (pictures and text)
With the increasing number of open platforms, the ...
How to install MySQL 5.7.29 with one click using shell script
This article refers to the work of 51CTO blog aut...
MySQL 8.0.22 installation and configuration graphic tutorial
MySQL8.0.22 installation and configuration (super...
Vite2.0 Pitfalls
Table of contents Vite project build optimization...
Super detailed steps to install zabbix3.0 on centos7
Preface Recently, part of the company's busin...
VMware vsphere 6.5 installation tutorial (picture and text)
vmware vsphere 6.5 is the classic version of vsph...
Solution for forgetting the root password of MySQL5.7 under Windows 8.1
【background】 I encountered a very embarrassing th...
What to do if you forget your Linux/Mac MySQL password
What to do if you forget your Linux/Mac MySQL pas...
Website Design Experience Summary of Common Mistakes in Website Construction
Reminder: Whether it is planning, designing, or de...
Solution to mysql prompt "got timeout reading communication packets"
Error message: user: 'root' host: `localh...
Introduction to new features of MySQL 8.0.11
MySQL 8.0 for Windows v8.0.11 official free versi...