HTML table knowledge summary-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML table knowledge summary

小云云

Nov 17, 2017 pm 02:29 PM

html Summarize sheet

To step into the door of programmers, the path we must pass is HTML. Only by mastering basic HTML can we better learn the next technology. So today we will share all aspects of knowledge related to HTML tables.

##1.

b, attribute of table tag

Width attribute: Indicates the width of the table, its value can be pixels (px) or 100% (%) of the parent element

height Attribute: Indicates the height of the table. Its value can be pixels (px) or a percentage (%) of the parent element

　border attribute: Indicates the width of the outer border of the table

align attribute : The display position of the table, the value left is displayed on the left, center is displayed on the center, right is displayed on the right, the default is left

　 Cellspacing attribute: the spacing of the cell time, the default is 2px, the unit pixel is

　 Cellpadding attribute: cell The display distance between the content and the cell border, in pixels

frame attribute: control the display distance of the table border

void(default value) means no border

above means only the top There is a border

Indicates only the right border

　　VSides indicates only the left and right borders

　　box contains all 4 borders

　　border contains all 4 borders

Rules Properties: Control whether and how to display the dividing lines between cells

None (default value) means no dividing lines

All means including all dividing lines

rows means Only row dividing lines

clos means there are only column dividing lines

Layout

2,Mark

a, when to use it? When to use If the table needs to use a title, then you can use the tag

　b. How to use it? The insertion position of the attribute is directly after the

attribute, before the table row

c, align attribute

top: The title is placed at the top of the table

botton: The title is placed at the bottom of the table

Left: The title is placed on the left side of the table

Right: The title is placed on the right side of the table

Mark

a, defines a row of the table. Each table row is represented by a pair of

... tags, each row Tags can be nested with multiple tag and appear in pairs

or	tags b, optional attributes Set the horizontal alignment format: align="color value" botton: Align to the top top: Align to the bottom Middle: Align to the center 4,	and	a,	and	are all cell tags, which must be nested within the
is the table header Mark, usually located in the first row or column. The text in	will be bolded by default, while	will not 　c,	is a data mark, indicating the cell The specific data d, the mark attributes of both are the same e, the attributes Cell background valign: Set cell vertical alignment Width: Set cell width Height: Set cell height rowspan: Set Number of rows occupied by cells Clospan: Set the number of columns occupied by cells eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table width="960" height="250" border="1" cellpadding="10" frame="box" > <caption>表格的标题</caption> <tr bgcolor="#ccc"> <th bgcolor="red">班级</th> <th>姓名</th> <th>年级</th> <th>成绩</th> </tr> <tr> <td>四年级一班</td> <td>张三</td> <td>16</td> <td>80</td> </tr> <tr> <td>四年级一班</td> <td>李四</td> <td>16</td> <td>70</td> </tr> <tr> <td>四年级一班</td> <td>王五</td> <td>16</td> <td>60</td> </tr> </table> </body> </html> Copy after login The above are some related contents of the most basic html table. According to the above Follow the tutorial to complete a form, I believe you will gain a lot. Related recommendations: Comprehensive introduction to HTML table properties Rediscover HTML tables Detailed introduction about HTML tables Actual use of HTML table layout ##Explanation of HTML table layout examples The above is the detailed content of HTML table knowledge summary. For more information, please follow other related articles on the PHP Chinese website! Statement of this Website 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 Hot AI Tools Undresser.AI Undress AI-powered app for creating realistic nude photos AI Clothes Remover Online AI tool for removing clothes from photos. Undress AI Tool Undress images for free Clothoff.io AI clothes remover Video Face Swap Swap faces in any video effortlessly with our completely free AI face swap tool! Show More Hot Article What's New in Windows 11 KB5054979 & How to Fix Update Issues 3 weeks ago By DDD How to fix KB5055523 fails to install in Windows 11? 2 weeks ago By DDD InZoi: How To Apply To School And University 4 weeks ago By DDD How to fix KB5055518 fails to install in Windows 10? 2 weeks ago By DDD Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla 1 months ago By 尊渡假赌尊渡假赌尊渡假赌 Show More Hot Tools Notepad++7.3.1 Easy-to-use and free code editor SublimeText3 Chinese version Chinese version, very easy to use Zend Studio 13.0.1 Powerful PHP integrated development environment Dreamweaver CS6 Visual web development tools SublimeText3 Mac version God-level code editing software (SublimeText3) Show More Hot Topics Where is the login entrance for gmail email? 7852 15 Java Tutorial 1649 14 CakePHP Tutorial 1403 52 Laravel Tutorial 1300 25 PHP Tutorial 1241 29 Show More Related knowledge Table Border in HTML Sep 04, 2024 pm 04:49 PM Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML. Nested Table in HTML Sep 04, 2024 pm 04:49 PM This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples. HTML margin-left Sep 04, 2024 pm 04:48 PM Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation. HTML Table Layout Sep 04, 2024 pm 04:54 PM Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail. HTML Input Placeholder Sep 04, 2024 pm 04:54 PM Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs. HTML Ordered List Sep 04, 2024 pm 04:43 PM Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively HTML onclick Button Sep 04, 2024 pm 04:49 PM Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively. Moving Text in HTML Sep 04, 2024 pm 04:45 PM Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement. See all articles Public welfare online PHP training，Help PHP learners grow quickly！ About us Disclaimer Sitemap © php.cn All rights reserved

tags

b, optional attributes

Set the horizontal alignment format: align="color value"

botton: Align to the top

top: Align to the bottom

Middle: Align to the center

and

are all cell tags, which must be nested within the

is the table header Mark, usually located in the first row or column. The text in

will be bolded by default, while

will not

is a data mark, indicating the cell The specific data

d, the mark attributes of both are the same

e, the attributes

Cell background

valign: Set cell vertical alignment

Width: Set cell width

Height: Set cell height

rowspan: Set Number of rows occupied by cells

Clospan: Set the number of columns occupied by cells

eg:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table width="960" height="250" border="1" cellpadding="10" frame="box" >
        <caption>表格的标题</caption>
    <tr bgcolor="#ccc">
        <th bgcolor="red">班级</th>
        <th>姓名</th>
        <th>年级</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>四年级一班</td>
        <td>张三</td>
        <td>16</td>
        <td>80</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>李四</td>
        <td>16</td>
        <td>70</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>王五</td>
        <td>16</td>
        <td>60</td>
    </tr>
    </table>
</body>
</html>

Copy after login

The above are some related contents of the most basic html table. According to the above Follow the tutorial to complete a form, I believe you will gain a lot.

Related recommendations:

Comprehensive introduction to HTML table properties

Rediscover HTML tables

Detailed introduction about HTML tables

Actual use of HTML table layout

##Explanation of HTML table layout examples

The above is the detailed content of HTML table knowledge summary. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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