Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy. OK
WordPress Theme & Editor Syntax Highlighter Blog
WordPress Theme & Editor Syntax Highlighter Forum Blog
You are here: Reference > HTML > tags > table

table element

Browser support:
Specifies an element that arranges its contents into rows and columns.
The table element is commonly used by authors as a layout device.
The advantage of using table elements for layouts:
  • Several different arrangements can be implemented with table elements.
  • In most cases, the layout is rendered identically in all commonly used browsers.
Drawbacks:
  • In some cases when the width or height attribute of a table element is set in percent, the rendered size of the table can be different in browsers. In that case, using absolute or static positioned elements can solve the problem.
Elements that belong to a table:
There are three different cluster elements within a table, the tHead (table header), tBody (table body) and the tFoot (table footer) elements that can be used to create a well formatted data table. Like every data table, a HTML table element can contain rows (tr) and cells (th, td).
Other elements that can be used with a table:
  • caption – Inserts a caption to the top or bottom of a table. Every table element may have only one caption element.
  • col, colGroup elements – Specify rules for one or more table columns in the table, but they are not recommended to use, because most browsers support these functionalities only partially.
Table elements in action:
The HTML code of this table is implemented in Example 2.
If you want to see the HTML tags by categories, please visit this page.
This element requires a closing tag.
JavaScript page for this element: table.

Possible members:

 Attributes
Events
Styles
Pseudos
accessKey
Sets an access key to an element.
align
Sets the horizontal alignment of an object relative to its parent.
background
Sets the background picture, which will be tiled if it is smaller than the object's dimensions.
bgColor
Sets the background color.
border
Sets the thickness of the border.
borderColor
Sets the color of the border.
borderColorDark
Sets or retrieves the color used to draw the right and bottom borders of a table.
borderColorLight
Sets or retrieves the color used to draw the left and top borders of a table.
cellPadding
Specifies the amount of space between the border of a cell and its contents in a table.
cellSpacing
Sets the amount of space between the border of the cells in a table.
class
Sets the style class or classes that belong to the element.
cols
Specifies the number of columns in a table.
contentEditable
3
 Sets whether the contents of the object are editable.
dataFld
Specifies which field of a given data source should be bound to the specified object.
dataFormatAs
Specifies how data is to be rendered.
dataPageSize
Sets the number of records that can be displayed in a table when data binding is used.
dataSrc
Sets the identifier of the data source that is bound to the element.
dir
Sets the text direction as related to the lang attribute.
DISABLED
Sets the state of an object for user interaction.
draggable
3.55
 Sets whether an element is draggable.
frame
Sets which borders of a table element should be displayed.
height
Specifies the height of an element.
HIDEFOCUS
Specifies whether a dotted rectangle (focus rectangle) is drawn around an object while it has focus.
hSpace
Specifies the number of pixels to use as a margin at the left and right sides of the object.
id
Sets a unique identifier for the object.
lang
Specifies the language of the element.
language
Sets the scripting language for the current element. Use it only for the script element.
name
Sets the name of an element.
rules
Specifies which borders will appear between cells within a table.
spellcheck
Sets whether the automatic spellchecker is enabled.
style
Sets an inline style associated with an element.
summary
Specifies a summary of the data represented in a table.
tabIndex
Specifies the tabbing order for keyboard navigation using the TAB key.
title
Specifies a tooltip for an element.
unSelectable
Sets whether the selection process can start in an element's content.
vSpace
Specifies the number of pixels to use as a margin at the top and bottom sides of an object.
width
Specifies the default width of the element.
xml:lang
Sets the language code of the XML document.

Example HTML code 1:

This example illustrates the use of the table element:
 
<table border="1px">
    <caption align="right">Fruits</caption>
    <tr>
        <td>Apple</td>
        <td>Pear</td>
        <td>Peach</td>
    </tr>
</table>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 2:

Table with caption, header and footer:
 
<table cellpadding="4px" cellspacing="2px" border="2px" bordercolor="black">
    <caption style="background-color:#DDDDDD;">Fruits</caption>
    <thead>
        <tr>
            <th>name</th>
            <th>price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>apple</td>
            <td>3.35$</td>
        </tr>
        <tr>
            <td>peach</td>
            <td>2.21$</td>
        </tr>
    </tbody>
    <tfoot>
        <tr style="font-weight:bold;">
            <td>Sum</td>
            <td>5.56$</td>
        </tr>
    </tfoot>
</table>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 3:

This is a more complex example:
 
<table border="1px" cellpadding="5px" cellspacing="3px" style="background-color:#F9E9E9;">
    <caption align="center">Fruits</caption>
    <thead>
        <tr>
            <th>fruit</th>
            <th>location</th>
            <th>cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Apple</td>
            <td>Alabama</td>
            <td>12.35</td>
        </tr>
        <tr>
            <td>Arkansas</td>
            <td>8.42</td>
        </tr>
    </tbody>
        <tr>
            <td>Peach</td>
            <td>Kansas</td>
            <td>17.89</td>
        </tr>
</table>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Related pages:

caption
col
colGroup
tBody
td
tFoot
th
tHead
tr

External links:

table element (MSDN)
table element (Safari Reference Library)
table element (W3C)
User Contributed Comments

Post Content

Post Content
WordPress Theme & Editor | Index Panel | Syntax Highlighter | Dottoro
Link To Us | Terms of Use | Contact Us | Privacy Policy
© 2024 Dottoro.com. All rights reserved.
HTML
CSS
JavaScript
Appendix