Introduction to table-related knowledge in HTML (code examples)

This article brings you an introduction to table-related knowledge in HTML (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When making a web page, you must plan the layout of the web page reasonably. For example, adding a table to a web page can be divided into three parts: upper, middle, and lower parts. The upper part stores the web page title or LOGO image, the middle part is the main content of the entire web page, and the bottom part is the relevant production information. In addition, cells can be added to the cells to organize the content into categories and levels.

Table label --table

is a double label. A table contains three basic elements:

, ,

. The first tag and the last tag indicate the beginning and end of a table. 'tr=table row' is used to indicate the start and end of a row, and 'td=table data' is used to indicate the start and end of a cell in the row.

                    ...

单元格内容	单元格内容
单元格内容	单元格内容

The title of the table--caption

There is a special cell called the title cell, located in the first row of the table, the title Cells have no borders and are centered by default.

<caption>表格的标题</caption>

Table border --border

By default, the table does not display borders. In order to better distinguish the content, you can set the width of the table border,

The distance between the text in the table and the border--cellpadding

Default In this case, the text fits snugly into the border. The distance between the text and the border can be adjusted through cellpadding

The distance between cells in the table--cellspacing

Cells in the table The distance between cells can also vary.

Cell background image--background

nbsp;html>


    <meta>
    <title>小白</title>


<p>默认情况下的表格</p>

                                                                              

亚洲

中国	北京	1949年10月1日
缅甸	内比都	1948年1月4日

---

设置属性后的表格

                                                                              

亚洲

中国	北京	1949年10月1日
缅甸	内比都	1948年1月4日

##Row merge attribute-- rowspan

When making some complex tables, you need to use cell merging

<td>
<pre class="brush:php;toolbar:false">nbsp;html>


    <meta>
    <title>单元格行合并</title>

                                                                                     

招生简章

基础科目	数学
外语
政治
专业课	100

columns Merge attribute--colspan

When making some complex tables, you need to use cell merging

<td>
<pre class="brush:php;toolbar:false">nbsp;html>


    <meta>
    <title>单元格列合并</title>

                                                                                            

西安
长安区	雁塔区	碑林区
新城区	高新区	莲湖区

Nesting of tables

A table contains other tags inside. Using tables to layout the page can make the various parts of the page not conflict with each other and the overall structure is beautiful.

nbsp;html>


    <meta>
    <title>表格嵌套</title>

                                                                              

昙花

                     

                     

浏览器

            百度         

                                                                                                                          

百度贴吧

百度网盘

百度图库

        

The above is the entire content of this article. For knowledge about HTML, you can refer to the

HTML Development Manual of the PHP Chinese website to learn.

The above is the detailed content of Introduction to table-related knowledge in HTML (code examples). For more information, please follow other related articles on the PHP Chinese website!