search
HomeWeb Front-endHTML TutorialTable element in HTML
Table element in HTMLDec 17, 2016 pm 02:01 PM

-- Table elements in HTML [Repost]
1,

tag. The
tag is the identifier of the table and is used to define the scope of the table. The
tag is used in pairs, and the content between the hand tag and the tail tag is the content of the table. The attributes of the
tag mainly include border, width, height, align, cellapcing, and cellpasdding. They are all optional.

 

1. The parameter value of the border attribute is a number, which represents the number of pixels occupied by the width of the table border. It can also be used without a parameter value, which simply indicates that the table has a border. For example,

means that the border width of the table is 10 pixels.

2. The width and height attributes are used to specify the size of the table. The width attribute is used to specify the width of the table, and the height attribute is used to specify the height of the table. The parameter values ​​of these two attributes can be numbers or percentages, where the number represents the pixels occupied by the width (height) of the table, and the percentage represents the percentage of the width (height) of the table occupying the width (height) of the browser window. For example:

means that the width of the table is 200 pixels and the height is 50% of the browser window height.

3. The parameter value of the align attribute is one of left, center and right, which respectively means that the table is located on the left side of its adjacent text, the table is horizontally centered, and the table is located on the right side of the adjacent text. For example:



Test page



cell cell
cell cell TH> Cell


1 Explanation item
Interpretation item Same as above Same as above


2ExplanationSame as above
Another unit Come next

Text description, this is an example of a table on the left side of adjacent text. Just change the attribute parameter of align to change the position of the table.


4, cellspacing attribute. The cellspacing attribute is used to specify the space between cells in the table. The parameter value of this property is a number, indicating the number of pixels occupied by the cell gap.

5, cellpadding attribute. Used to specify the size of the white space between the cell content and the cell boundary. The parameter value of this property is also a number, which represents the number of pixels occupied by the height of the blank distance between the cell content and the upper and lower borders and the number of pixels occupied by the width of the blank distance between the cell content and the left and right borders. For example:













cell cell cell cell cell
1 Cell Cell Cell Cell
2 cell cell cell cell Cell



The situation after adding cell attribute provisions:




> ;





cell

< ;/table>



Then let’s take a look at what the unfamiliar tags we just saw mean.

One,
cell cell cell cellCell
1 Cell Cell Cell Cell Cell
2cell cell cell
tag. Is the label of the table title. It is a tag used in pairs. The content between the first tag and the last tag is the title of the table. There are two attributes: align and valign, both of which are optional.

Among them, the parameter value of the align attribute is one of left, center, and right, which respectively means that the table title is aligned with the left edge of the table, and the middle of the table is aligned with the right edge of the table. By default, the table title is located in the middle of the table; the parameter value of the valign attribute is one of top and bottom, indicating that the table title is located above and below the table. By default, the table title is located above the table. For example:

Test page








< ;TD>1


The table title in is aligned with the right edge of the table.

Two,

tag. is the row label. HTML tables are organized by rows. A table consists of several rows, and there must be several labels corresponding to them. Row labels are labels used in pairs. It must be used in conjunction with the and when used to specify the content of each cell in the row. The tag has two attributes. That is, the align and valign attributes, they are both optional.

The parameter value of the align attribute is one of left, center and right (as I specifically explain in the future, the parameters of this attribute are all three) respectively indicate that the content of each cell in the row is left aligned, horizontally centered or right aligned. The default is left; the parameter value of the valign attribute is one of top, middle, and bottom, which respectively indicates that the content of each cell in the row is close to the top edge, vertically centered, and close to the bottom edge. The default is middle.

Three,

This is the title of the table
cell cell
Cell Cell Cell
cell cell cell cell
2 Cell Cell Cell
tag, which is nested between
and tags

and tags are used to specify cell content, and the header tag is used to specify header elements. Content, the header element is generally located in the first row of each column, and is used to describe which object the specific data of the column relates to. Tags are paired. Data tags are also used in pairs. The content between the first tag and the last tag is the specific data of the cell (that is, the explanation of the header). Since both are used to specify the content of the unit, All attributes and corresponding attribute functions of and tags are exactly the same. The attributes of the label include rowspancolspanalignvalign.

(1) The parameter value of the rowspan attribute is a number, indicating the number of rows spanned by the cell. The default value is 1.

(2) The parameter value of the colspan attribute is also a number, indicating the number of columns spanned by the cell. The default value is 1.

(3) The align attribute is used to specify the horizontal position of the cell content. The three parameter values ​​indicate whether the cell is left-aligned, centered, or right-aligned. The default is left (left aligned)

(4) The valign attribute is used to specify the vertical position of the cell content. The parameter value of the attribute is one of top, middle, and bottom, which respectively indicates whether the cell content is close to the upper edge, vertically centered, or close to the lower edge. The default is middle (vertically centered).

Okay, that’s almost it for today! There are too many to look at and difficult to remember.


The above is the content of table elements in HTML. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment