HTML table

Tables are very common in our daily lives, but how to output tables in our web pages? The

tag defines an HTML table.
A simple HTML table consists of the table element and one or more tr, th, or td elements.
trElement defines table row,th# The ## element defines the header, and thetdelement defines the table unit.
Let us make the simplest form
php.cn

1月份￥100

二月份￥200

Program running results:

cellspacing, the distance between cells

cellpadding, the distance between the text and the cell border is in pixels

borderAdd a border to the text Set the border to border=0 and the table will not display the border

The above three attribute values can be set by yourself according to your own requirements

HTML table header

The header of the table is defined using the tag.

Most browsers will display the header as bold, centered text:

Example

    php.cn 
   月份  金额  
 1月份  ￥100  
  二月份  ￥200

Program running result:

# colspan and rowspan

#By adding colspan and rowspan attributes to the tag , you can merge cells horizontally and vertically

Instance

Before merging

    php.cn 
    单元格  单元格  单元格  
  单元格  单元格  单元格  
  单元格  单元格  单元格

Program running result:

After merging

    php.cn 
    单元格  单元格  
  单元格  单元格  单元格  
  单元格

Look at the code running results again:

Look for the rules

##More Multiple instances

This example demonstrates a table without borders.

    php.cn 
  这个表格没有边框:
   200  300  
  500  600  
 
 这个表格没有边框:
   200  300  
  500  600

Program running result:

Example

This example Demonstrates how to display elements within different elements.

    php中文网(php.cn) 
     这是一个段落
 这是另一个段落
  这个单元格包含一个表格:   A  B  
  C  D  
 
  
  这个单元格包含一个列表  apples
 bananas
 pineapples
 
  HELLO

Code running results:

##HTML table tag

Tag	Description


Define the table
Define the header of the table
Define table rows

Define table cells

## Define the body of the table Define the footer of the table



Define the table title

Define the table columns Group
## Define the header of the table

##Continuing Learning

new file

php.cn

1月份	￥100
二月份	￥200

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

HTML table

IntermediateFront-end Vue3 actual combat [handwritten vue project]

ElementaryAPIPOST tutorial [Popularization of technical concepts related to network communication]

IntermediateIssue 22_Comprehensive actual combat

ElementaryIssue 22_PHP Programming

ElementaryIssue 22_Front-end development

IntermediateBig data (MySQL) video tutorial full version

ElementaryGo language tutorial-full of practical information and no nonsense

ElementaryGO Language Core Programming Course

IntermediateJS advanced and BootStrap learning

IntermediateSQL optimization and troubleshooting (MySQL version)

IntermediateRedis+MySQL database interview tutorial

ElementaryDeliver food or learn programming?

单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格