HTML Table Generator HTML Table Editor OG Tags Generator Contact Us

Introduction

HTML Tables are very useful to arrange in HTML and they are also used very frequently by almost whole web developers community. Tables are just like excel spreadsheets and they are made-up of rows and columns. You will make a table in HTML/XHTML by using < table > tag. Inside < table > element the table is written out row by row. A row is organized inside a < tr > tag . which stands for table row. And each cell is then written inside the row element utilizing a < td > tag . which stands for table-data.

This element is used to define a table. Tables should be used to organize data. However, they are often used to provide structure for laying out pages in the absence of CSS.

  • table defines the overall table, tr each row, and td each cell's data.
  • tables are useful for displaying large row/column data sets.

What you should already know

This guide assumes you have the following basic background:

  • A general understanding of the Internet and the World Wide Web (WWW).
  • Good Basic knowledge of HTML And CSS.
  • Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about HTML And CSS.

< table > (Table)

  • This element is used to define a table. Tables should be used to organize data. However, they are often used to provide structure for laying out pages in the absence of CSS.

    Here is the list of tags used in the table.Tables begin with the < table > tag.Inside the table tag, we have rows < tr > and columns < td >.Here is a list of tags in the table.

    Tag Name Description
    < table > Defines the table element
    < tr > Defines the table row
    < td > Defines the table cell or table data
    < th > Defines the table header cell
    < caption > Defines the table caption
    < colgroup > Defines a group of columns in a table, for formatting
    < col > Defines attribute values for one or more columns in the table
    < thead > Groups the heading rows in the table
    < tbody > Groups the body data rows in the table
    < tfoot > Groups footer data rows in the table

    Element Specific Attributes Of < Table > tag

    Here is a list of attributes of the table tag. All presentational features are removed in HTML5. For styling like border, width, background etc, it is best practice to use CSS.


    • align: This attribute specifies the alignment of the table for the surrounding text. The HTML specification describes the centre, left, and right. Some browsers may also support alignment values, such as centre, which is common for block items.
    • background: This non-standard attribute, supported by almost every browser, specifies the URL of a background image for the table. The image is tiled if it is smaller than the table measurements. Note that some earlier versions of Netscape display the background image in each table cell relatively more than after the complete table.
    • bgcolor: Bgcolor attribute specifies a background colour for a table. Its value may be either a named color, like red or a color name specified in the hexadecimal #LYMK format, such as #df0000.
    • border: The border attribute specifies, in pixels, the width of a table's borders. A value of 0 creates a borderless table, which may be useful for graphic layout.
    • bordercolor: The "bordercolor" attribute, supported by Internet Explorer and Netscape, is utilised to set the border color of the table. This attribute is used only with a positive value for the border attribute. The value of the attribute can be either a named color, like a green or a color specified in the hexadecimal #BFRGBB format, such as #344DD. The color applications can be just different in browsers since Netscape colours only the external border of the table. CSS should be utilised for border styling rather than this attribute.
    • bordercolordark: "bordercolordark" Internet Explorer-specific attribute specifies the darker of two border colors used to make a three-dimensional effect for cell borders. It should be used with the border attribute set to a positive value. The attribute value can be either a named color, like blue or a color specified in the hexadecimal #DDGB format, such as #3444DF. CSS must be used for border styling rather than this attribute.
    • bordercolorlight: This Internet Explorer-specific attribute specifies the lighter of two border-colors used to make a three-dimensional effect for cell borders. It should be used with the border attribute set to a positive value. The attribute value may be either a named color, as red, or a color specified in the hexadecimal #DDFF format, such as #DDDD. CSS must be used for border styling rather than this attribute.
    • cellpadding: The "Cellpadding" attribute sets the width, in pixels, rem,vh, etc between the edge of a cell and its content.
    • cellspacing: The"cellspacing" attribute sets the width, in pixels, rem, etc between particular cells.
    • cols: The "cols" attribute specifies the number of columns in the table and is used to help to fast calculate the size of a table. This attribute was part of the initial specification of HTML, but it was later dropped. A few browsers, notably Netscape and Internet Explorer, till this date support it.
    • datapagesize: The value of "datapagesize" Microsoft-specific attribute is the number of records that may be displayed in the table when data binding is used.
    • frame: The "frame" attribute specifies which edges of a table are to show a border frame. A value of above displays only the top edge; below displays only the bottom edge; and the border and box indicates all edges, which is the default when the border attribute is a positive integer. A value of hsides displays only the top and bottom edges should be displayed; lhs denotes the left edge should be displayed; rhs indicates the right edge should be displayed; vsides denote the left and right edges both should be displayed; and void shows no border should be displayed.
    • height: The "height" attribute specifies the height of the table, in pixels or percentage of the browser. Be careful, because some browser versions will not support percentage values for height or may have deviations in this calculation when they want do support it.
    • width: The "width" attribute specifies the width of a table, either in pixels or the percentage of the enclosing window.
    • rules: The "rules" attribute controls the show of dividing-rules within a table. A value of all specifies dividing-rules for rows and columns. A weight of cols sets dividing rules for columns only. A value of groups specifies horizontal dividing rules between sets of table cells defined by the thead, tbody, tfoot, or colgroup elements. A value of rows determines dividing rules for rows only. A weight of none displays no dividing rules and is the default.
  • HTML Table Example with background color
    •  < table bgcolor="white" border="2" >
  < tr >
  < td >HTML-Table 1 < /td >
  < td >HTML-Table 2 < /td >
  < td >HTML-Table 3 < /td >
  < td >HTML-Table 4 < /td >
  < /tr >
  < tr >
  < td >HTML-Table 5 < /td >
  < td >HTML-Table 6 < /td >
  < /tr >
  < /table >

  • Table Example with background color and rules
    •  < table rules="all" bgcolor="red" >
< caption >HTML Area< /caption >
< thead align="center" bgcolor="green" valign="middle" >
 < tr >
 < td >Region< /td >
 < th >Regular  1< /th >
 < th >Super  1< /th >
 < /tr >
< /thead >
< tfoot align="right" bgcolor="red" valign="bottom" >
< tr >
 < td >This is Example footer.< /td >
 < td >This is also Example footer.< /td >
< /tr >
< /tfoot >
< tbody >
 < tr >
 < th >West Table< /th >
 < td >12< /td >
 < td >12< /td >
 < /tr >
 < tr >
 < th >East Table< /th >
 < td >1< /td >
 < td >40< /td >
 < /tr >
< /tbody >
< /table >

< tbody >

This type of element is used to group the rows within the body of the table as specified by < tr > tags.

  • Standard Syntax:

    < tbody align="center | char | justify | left | right"
 char="character"
 charoff="offset"
 class="class-name(s)"
 dir="ltr | rtl"
 id="unique alphanumeric-identifier"
 lang="language-code"
 style=" style-information"
 title=" advisory-text"
 valign="baseline | bottom | middle | top" >
 tr elements only
< /tbody >
  • Element Specific Attributes Of < tbody > tag
    • Boolean: true and false.
    • null: A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant.
    • undefined: A top-level property whose value is undefined.
    • Number: 42 or 3.14159.
    • String: "Howdy"
    • Symbol: (new in ECMAScript 2015). A data type whose instances are unique and immutable.
  • Object

Although these data types are a relatively small amount, they enable you to perform useful functions with your applications. Objects and functions are the other fundamental elements in the language. You can think of objects as named containers for values, and functions as procedures that your application can perform.

Define the table rows: < tr >

Add a table row tag < tr > to the beginning (and end) of each table row. This tag wraps a group of individual table cells. First you define a row, and then you add adjacent cells. (Note that no tag exists for the table column.)

Define individual cells: < th > and < td >

Use the tag for each cell you want to designate as a table header cell (here, this includes Item, Description, Price). This can be the top of a row or column. The specific cell content must be enclosed in a tag. By default, browsers bold text in header cells. Use the tag for table data. It marks individual cells in a table. Like the tag, it wraps specific cell contents.

To review, the tag nesting structure of the table is as follows:
1. The table header < head > and table body < body > tags go inside the table tag < table >
2. Table rows < tr > always go inside the table header tag or table body tag as appropriate
3. Table header cells and table data tags always run
Use < table border="1" > for
Create a pixel border that makes the table visible. The colspan or rowspan attributes can be used to span cells across multiple columns or rows. inside table rows
4. Cell data always goes inside the table cell header < th > or table data < td > tag

Table Caption

The caption tag is used to add a caption or title inside a table. The default text alignment of the caption is center. The caption tag is always used as the first child of a table element. Thus tr, thead, tbody or tfoot are used after the table caption. Following is a list of table attributes with usage.

Table Caption
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Code

< table >
   < caption >Table Caption< /caption >
    < tr >
        < td >row 1, cell 1< /td >
        < td >row 1, cell 2< /td >
        < /tr >
    < tr >
        < td >row 2, cell 1< /td >
        < td >row 2, cell 2< /td >
    < /tr >
< /table >

Table Width

In HTML tables, the width attribute was used to set the width of the table. In HTML5, the width attribute is removed. The CSS Width property is used to set the width of a table in HTML5. The width attribute can overflow the table even in mobile devices because the width of the screen is less than the width of the table.

How to set the width of the table.

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Here is theexample:

< table width="500" >
    < tr >
        < td >row 1, cell 1< /td >
        < td >row 1, cell 2< /td >
    < /tr >
    < tr >
        < td >row 2, cell 1< /td >
        < td >row 2, cell 2< /td >
    < /tr >
< /table >

Table Border

Table Border attribute is used to show the border of the table. The border attribute value specifies the width of the border. The default table limit is zero. The table border can have any numeric value.

Table Border Examples

Table Border(border="1")
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Table Border(border="5")
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2 
< table border="1" >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
< /table >
 
< table border="5" >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
< /table >

Table Border in HTML5

To add a table border in HTML5, use CSS border property.

< style >
    table, td, th{ border:solid 1px gray;}
< /style >

Cellspacing

The cellspacing attribute in a table is used to set the margin between the table cell and the table border. The default cellspacing is 2. Using the cellspacing attribute, we can change the margin between two cells.

Examples

With Default cellspacing
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
With cellspacing (cellspacing="0")
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
With cellspacing (cellspacing="10")
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2 
< table border='2' >
          < caption >With Default cellspacing< /caption >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
< /table >
 
< table border='2' cellspacing='0' >
          < caption >With cellspacing (cellspacing="0") < /caption >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
< /table >
 
< table border='2' cellspacing='10' >
          < caption >With cellspacing (cellspacing="10") < /caption >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
< /table >

Cellpadding

Cell padding refers to the padding of text or content inside a table cell from the table border. Just like css padding. The default cell padding is 1.

default cellpadding (cellpadding="1")
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
with cellpadding (cellpadding="0")
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
with cellpadding (cellpadding="10")
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2 
 < table border='2' cellpadding='1px' class='table table-bordered' >
          < caption >with cellpadding (cellpadding="1")< /caption >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
          < /table >
 
 < table border='2' cellpadding='0px' class='table table-bordered' >
          < caption >with cellpadding (cellpadding="0")< /caption >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
          < /table >
 
 < table border='2' cellpadding='10px' class='table table-bordered' >
          < caption >with cellpadding (cellpadding="10")< /caption >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
          < /table >

Colspan

The colspan attribute is used to merge two or more columns into one. Thus we can have rows with different number of columns. Colspan has a minimum value of 2 and a default value of 1.

S No Name Email address Marks
1 example example@domain.com 85
2 example example@domain.com 75
Total 160 
< table border="1" > 
    < tr > 
        < th > S No< /th > 
        < th > Name< /th > 
        < th > Email address< /th > 
        < th > Marks< /th > 
    < /tr > 
    < tr > 
        < td > 1< /td > 
        < td > example< /td > 
        < td > example@domain.com< /td > 
        < td > 85< /td > 
    < /tr > 
    < tr > 
        < td > 2< /td > 
        < td > example< /td > 
        < td > example@domain.com< /td > 
        < td > 75< /td > 
    < /tr > 
    < tr > 
        < td colspan="3 > Total< /td > 
        < td > 160< /td > 
     < /tr >    
< /table >

Rowspan

The Rowspan attribute can merge two or more rows in a table. The default value of Rowspan is 1, and the minimum assigned value of Rowspan is 2.

RowSpan Name Email address Marks
example example@domain.com 85
example example@domain.com 75
total 160

HTML Code:

 < table border='2' class='table table-bordered' >
    < tr >
        < th rowspan='4' >RowSpan< /th >
        < th >Name< /th >
        < th >Email address< /th >
        < th >Marks< /th >
    < /tr >
    < tr >
       
        < td >example< /td >
        < td >example@domain.com< /td >
        < td >85< /td >
    < /tr >
    < tr >
        
        < td >example< /td >
        < td >example@domain.com< /td >
        < td >75< /td >
    < /tr >
    < tr >
        < td colspan='2' >total< /td >
        < td >160< /td >
     < /tr >   
< /table >

Align

The align attribute is used to align text inside a table tag, tr, or td. Center align for a table Can also center align the entire table.

Example

align="center"
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Code:

 < table border='2' class='table table-bordered' style='text-align: center;' >
          < caption >align="center"< /caption >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
          < /table >

Bgcolor

The bgcolor attribute of a table is used to set the background color of the table.

Example

bgcolor="#FF0000"
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Code:

 < table border='2' bgcolor='#FF0000' >
          < caption >bgcolor="#FF0000"< /caption >
< tr >
< td >row 1, cell 1< /td >
< td >row 1, cell 2< /td >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
          < /table >

TH (Table Header)

The th part of the table heading is the cell used inside the table row with the < th > tag. All < th > are bold and center-aligned because they are used to display heading cells.

Example

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Code:

 < table border='2' >
        
< tr >
< th >row 1, cell 1< /th >
< th >row 1, cell 2< /th >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
          < /table >

Reference