element allows web authors to display tabular data (such as text, images, links, other tables,etc.) in a two-dimensional table with rows and columns of cells.
Simple Table
Heading 1/Column 1
Heading 2/Column 2
Row 1 Data Column 1
Row 1 Data Column 2
Row 2 Data Column 1
Row 2 Data Column 2
This will render a
consisting of three total rows (): one row of header cells (, , or ).
colspan = A non-negative integer that specifies the number of columns spanned by the current cell. The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current to the last column of the column group
in which the cell is defined.
Column Groups
Sometimes you may want to apply styling to a column or group of columns. Or for semantic purposes, you may want to group columns together. To do this, use
and elements.
The optional
tag allows you to group columns together. elements must be child elements of a
) and two rows of content cells (
).
elements are tabular headers and
elements are tabular data. You can put whatever you want inside a
or
.
Heading 1/Column 1
Heading 2/Column 2
Row 1 Data Column 1
Row 1 Data Column 2
Row 2 Data Column 1
Row 2 Data Column 2
Spanning columns or rows
Table cells can span multiple columns or rows using the colspan and rowspan attributes. These attributes can be applied to
and
elements.
row 1 col 1
row 1 col 2
row 1 col 3
This second row spans all three columns
This cell spans two rows
row 3 col 2
row 3 col 3
row 4 col 2
row 4 col 3
Will result in
row 1 col 1
row 1 col 2
row 1 col 3
This second row spans all three columns
This cell spans two rows
row 3 col 2
row 3 col 3
row 4 col 2
row 4 col 3
Note that you should not design a table where both rows and columns overlap as this is invalid HTML and the result is handled differently by different web browsers.
rowspan = A non-negative integer that specifies the number of rows spanned by a cell. The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current row until the last row of the table (
and must come after any elements and before any table content (e.g., , , , etc.).
...
The optional tag allows you to reference individual columns or a range of columns without applying a logical grouping. elements are optional, but if present, they must be inside a element.
...
The following CSS styles can be applied to and elements:
border
background
width
visibility
display (as in display: none)
display: none; will actually remove the columns from the display, causing the table to render as if those cells don’t exist
HTML also provides the tables with the , , , and elements. These additional elements are useful for adding semantic value to your tables and for providing a place for separate CSS styling.
When printing out a table that doesn’t fit onto one (paper) page, most browsers repeat the contents of on every page.
There’s a specific order that must be adhered to, and we should be aware that not every element falls into place as one would expect. The following example demonstrates how our 4 elements should be placed.
Table Title
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
The following example’s results are demonstrated twice–the first table lacks any styles, the second table has a few CSS properties applied: background-color, color, and border*. The styles are provided as a visual guide and is not an essential aspect of the topic at hand.
Table with thead, tbody, tfoot, and caption
Element
Styles Applies
Yellow text on black background.
Bold text on purple background.
Text on blue background.
Text on green background.
Orange borders.
Red borders.
Heading scope
th elements are very commonly used to indicate headings for table rows and columns, like so:
Column Heading 1
Column Heading 2
Row Heading 1
Row Heading 2
This can be improved for accessibility by the use of the scope attribute. The above example would be amended as follows:
Column Heading 1
Column Heading 2
Row Heading 1
Row Heading 1
scope is known as an enumerated attribute, meaning that it can have a value from a specific set of possible values. This set includes:
Similar to other programming, markup, and markdown languages, comments in HTML provide other developers with development specific information without affecting the user interface. Unlike other languages however, HTML comments can be used to specify HTML elements for Internet Explorer only. This topic explains how to write HTML comments, and their functional applications.
Creating comments
HTML comments can be used to leave notes to yourself or other developers about a specific point in code. They can be initiated with <!– and concluded with –>, like so:
They can be incorporated inline within other content:
This part will be displayed .
They can also span multiple lines to provide more information:
However, they cannot appear within another HTML tag, like this:
>This will not work
This produces invalid HTML as the entire
block would be considered a single start tag h1 with some other invalid information contained within it, followed by a single > closing bracket that does nothing.
For compatibility with tools that try to parse HTML as XML or SGML, the body of your comment should not contain two dashes --.
Commenting out whitespace between inline elements
Inline display elements, usually such as span or a, will include up to one white-space character before and after them in the document. In order to avoid very long lines in the markup (that are hard to read) and unintentional white-space (which affects formatting), the white-space can be commented out.
WP Pro Online uses cookies for its advertisement solutions and for analytics. We hope you're ok with this, but you can opt-out if you wish. Read our Privacy Policy and Cookie Policy. AcceptReject
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
