Home > Developer > Web Develop
A TABLE element of HTML
1.TABLE Element
<table> tags define HTML tables. A simple HTML table consists of a TABLE element and one or more tr, TH, or TD elements. The TR element defines the table row, the th element defines the header, and the TD element defines the table cell. More complex HTML tables may also include caption, Col, Colgroup, THEAD, TFOOT, and tbody elements.
Properties of the Table element:
Frame Property Value:
The property value of the rules:
Usage of summary:
1 <TableBorder= "1"Summary= "Monthly savings for The Flintstones family">2 <TR>3 <th>Month</th>4 <th>Savings</th>5 </TR>6 <TR>7 <TD>January</TD>8 <TD>$</TD>9 </TR>Ten </Table>
The summary property does not cause any visual changes in the normal browser.
2. Caption elements
The caption element defines the table caption. The caption tag must follow the table label immediately. You can only define a title for each table. Usually the title is centered on the table.
Optional properties:
3.tr elements
The <tr> tag defines the rows in the HTML table. The TR element contains one or more th or TD elements.
Char, Charoff properties have little browser support.
4. td|th elements
Defines a table header cell within a table. There are two types of cells in an HTML form:
The text inside the th element is usually rendered as centered bold text, while the text inside the TD element is usually left-aligned plain text
abbr, Axis, char, charoff, headers, scope and other property browsers are hardly supported.
5. Colgroup, col elements
<col> tags define attribute values for one or more columns in a table. You can only use this element in a table or Colgroup.
<colgroup> tags define the groups of table columns. With this tab, you can combine columns to format them. This element is only valid in <table>.
Note: The Colgroup element can contain only col elements.
Note: The Colgroup element cannot create a table column. To create a column, you must specify the TD element within the TR element.
Property:
Example:
<HTML> <Body> <Tablewidth= "100%"Border= "1"> <Colgroupspan= "3"style= "Background:red"> <Colwidth= "300px"> <Colspan= "2"width= "400px"> <TRHeight= "a"valign= "Middle"> <th>Isbn</th> <th>Title</th> <th>Price</th> </TR> <TRHeight= "a"valign= "Middle"> <TD>3476896</TD> <TD>My First HTML</TD> <TD>$53</TD> </TR> <TRHeight= "a"> <TD>2489604</TD> <TD>My First CSS</TD> <TD>$47</TD> </TR> </Table> </Body></HTML>
Set the background color of three columns to red, the width of the first column is 300px, the remaining two are listed as 400px;
6.thead, TFOOT, tbody elements
The THEAD, TFOOT, and tbody elements give you the ability to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a total row at the bottom. This partitioning gives the browser the ability to support table body scrolling independent of table headings and footers. When a long table is printed, the table header and footer can be printed on each page that contains the table data.
1 <Table>2 3 <thead>4 <TR>5 <TD>Text in the THEAD</TD>6 </TR>7 </thead>8 9 <tfoot>Ten <TR> One <TD>Text in the TFOOT</TD> A </TR> - </tfoot> - the <tbody> - <TR> - <TD>Text in the TBODY</TD> - </TR> + </tbody> - + </Table>
Table elements for HTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
