HTML table tag | style, attributes, colspan, border, width, padding examples

HTML Table tag is used for present content in tabular format. With that, you can easily quickly and easily lookup values. A table structured set of data made up of rows and columns.

An HTML table is defined like that- <table> with <tr> and <td> tags. Where <tr> tag is represent row and <td> tag is for table data (cell). Without <tr> and <td> tag you can’t respresnt a content in tabular format.

This tutorial we will cover all HTML table basics.

HTML table tag example

This tag also used as a other tag for content – HTML p tag.

Important tags in HTML table layout

  • <tr> – Table row
  • <td> – Table data (cell)
  • <th> – Header cell

HTML table example | How to use

For this example, we are using a border attribute in the <table> tag. You can remove this border attribute (only use <table>).

There are 3 rows and 3 columns in the table. A first row as a header to describe other table data.

<!DOCTYPE html>
<html>
        
        <body>
            <table border="1">
                <tr>
                    <td>Firstname</td>
                    <td>Lastname</td>
                    <td>Age</td>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Wick</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>Halle</td>
                    <td>Berry</td>
                    <td>24</td>
                </tr>
            </table>
    </body>
</html>
<p><div><strong>Output:</strong></div></p>
HTML table example output

Remove border and use HTML table header tag | <th>

Using <th> tag will represent, this column vertical-align that type of content. See example how to use it and in output will show bold text for header content.

If you don’t want a border in html table then just removed border attribute. See below example.

<!DOCTYPE html>
<html>
        
        <body>
            <table>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Wick</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>Halle</td>
                    <td>Berry</td>
                    <td>24</td>
                </tr>
            </table>
    </body>
</html>

Output:

HTML table header tag

HTML table structure

Basic structure and details of tables.

HTML table structure

<td colspan=””> | HTML table colspan attribute

collapse – in which both the space and the borders between table cells collapse so there is only one border and no space between cells.

To collapse the border, add the following to your style sheet.

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table {
                border-collapse: collapse;
            }
        th, td {
            border: 1px solid orange;
        }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

<table border=”1″> | HTML table border attribute

As above example simply use border attribute in table element.

<table border="1">
...
</table>

HTML table align Center | top | right | top left

The alignment (align attribute) is very useful in html elements. Let’s see how to do in Html table.

Note: top, left and top left is by default aligned. No need to do code for it.

A right aligned HTML table:

<!DOCTYPE html>
<html>
        
        <body>
            <table align="right">
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Wick</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>Halle</td>
                    <td>Berry</td>
                    <td>24</td>
                </tr>
            </table>
    </body>
</html>

Same you can do for others <table align=”left|right|center”>

HTML table column width | Auto | Fixed | Equal | Size |

The width attribute specifies the width of a table column. Let’s see a simple example set width for 300px.

<!DOCTYPE html>
<html>
        
        <body>
            <table width="300px">
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Wick</td>
                </tr>
                <tr>
                    <td>Halle</td>
                    <td>Berry</td>
                </tr>
            </table>
    </body>
</html>

Equal column width:-

<table width="400px">
  <tr>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  </tr>
</table>

Auto width:-

<!-- using old school HTML: -->
<table width="100%">
...
</table>

<!-- using a CSS inline style: -->
<table style="width: 100%">
...
</table>

Fixed width:

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>
<!-- CSS -->
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

HTML table padding | Adding cellpadding

The padding makes space for the area around the content (inside the border) of an element. With CSS, you can use the padding property in the stylesheet.

<!DOCTYPE html>
<html>
    
    <head>
        <style>
            th, td {
                padding: 15px;
            }
        </style>
    </head>
        
        <body>
                <table>
                    <tr>
                        <td>One</td>
                        <td>one</td>
                    </tr>
                    <tr>
                        <td>Two</td>
                        <td>two</td>
                    </tr>
                    
                </table>

    </body>
</html>

How to add html table caption?

To add a caption to a table, use the <caption> tag inside a table tag. see below code. A caption will be shown in the center without separation.

<!DOCTYPE html>
<html>
        
        <body>
                <table>
                    <caption>Counting number</caption>
                    <tr>
                        <td>One</td>
                        <td>one</td>
                    </tr>
                    <tr>
                        <td>Two</td>
                        <td>two</td>
                    </tr>
                    
                </table>

    </body>
</html>

HTML table footer and Header

theadtfoot and tbody allow you to separate the table into headerfooter, and body, which can be handy when dealing with larger tables formatting.

<table>
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <!-- etc. -->
    </tbody>
</table>

Specifying Font and Size in HTML table

One way to do html table font size and type is using a <font> tag.

<!DOCTYPE html>
<html>
        
        <body>
            <font size="2" face="Courier New" >
                <table width="100%">
                    <tr>
                        <td><b>Client</b></td>
                        <td><b>InstanceName</b></td>
                        <td><b>dbname</b></td>
                        <td><b>Filename</b></td>
                        <td><b>KeyName</b></td>
                       
                    </tr>
                    <tr>
                        <td>NEWDEV6</td>
                        <td>EXPRESS2012</td>
                        <td>master</td><td>master.mdf</td>
                        
                    </tr>
                </table>
            </font>
            <font size="5" face="Courier New" >
                <table width="100%">
                    <tr>
                        <td><b>Client</b></td>
                        <td><b>InstanceName</b></td>
                        <td><b>dbname</b></td>
                        <td><b>Filename</b></td>
                        <td><b>KeyName</b></td>
                        
                    <tr>
                        <td>NEWDEV6</td>
                        <td>EXPRESS2012</td>
                        <td>master</td>
                        <td>master.mdf</td>
                        <td>test_key_16</td>
                        
                </table></font>
    </body>
</html>

Output:

Specifying Font and Size in HTML table

Another way is use a CSS.

<table style='font-family:"Courier New", Courier, monospace; font-size:80%' ...>
...
</table>

HTML table height of the cell

Height attribute specifies the height of a cell <td>.

<td height="100">abc</td>
<td height="100">100</td>

HTML table span | rowspan

<td rowspan=”number“> define number of rows a cell should span.

<!DOCTYPE html>
<html>
        
        <body>
            <table border="1">
                    <tr>
                        <th>Month</th>
                        <th>Savings</th>
                        <th>Info</td>
                    </tr>
  
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                        <td rowspan="2"> Holiday</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                    </tr>
                
            </table>
    </body>
</html>

Output:

HTML table span rowspan

HTML table attributes

As above some of example you saw which are used attributes. See the below list some attribute and there works.

AttributeValueDescription
alignleft
center
right

Alignment of a table according to the surrounding text
bgcolorrgb(x,x,x)
#xxxxxx
colorname

background color for a table
border1
0

Specifies whether or not the table is being used for layout purposes
cellpaddingpixels
The space between the cell wall and the cell content
cellspacingpixels
Space between cells
framevoid
above
below
hsides
lhs
rhs
vsides
box
border

Specifies which parts of the outside borders that should be visible
rulesnone
groups
rows
cols
all

Specifies which parts of the inside borders that should be visible
summarytext
Specifies a summary of the content of a table
widthpixels
%

Width of a table

Change the HTML table background color

Use bgcolor attribute in table tag to change color.

<!DOCTYPE html>
<html>
        
        <body>
                <table bgcolor="#0a223d ">
                    <tr>
                        <td>One</td>
                        <td>one</td>
                    </tr>
                    <tr>
                        <td>Two</td>
                        <td>two</td>
                    </tr>
                    
                </table>

    </body>
</html>

Question: How to make an HTML table scrollable?

To make the table vertically scrollable, first, use the table inside a <div> tag and then fixed the height of the <div> tag and set the overflow attribute to auto.

See the code line:

<div style="height: 100px; overflow: auto">
  <table style="height: 500px;">
   ...
  </table>
</div>

Question: Is it possible to HTML table with an empty row?

Yes, it is possible to empty row in the table, for that you Just need to add the CSS rule.

<!-- HTML code -->
<tr class="blank_row">
    <td colspan="3"></td>
</tr>

<!-- CSS code -->
.blank_row
{
    height: 10px !important; /* overwrites any other rules */
    background-color: #FFFFFF;
}

Question: How to HTML table alternate row color?

Answer: In HTML Striped tables or even and odd rules on row color needed CSS code. See below example of how to do change row color in an alternate manner.

<!DOCTYPE html>
<html>
    
    <head>
        <style>
        table tr:nth-child(odd) td{
        background:#ccc;
        }
        table tr:nth-child(even) td{
        background:#fff;
        }
        </style>
    </head>
        
        <body>
            <table border="1">
                <tr>
                    <td>One</td>
                    <td>one</td>
                </tr>
                <tr>
                    <td>Two</td>
                    <td>two</td>
                </tr>
                <tr>
                    <td>Three</td>
                    <td>three</td>
                </tr>
                <tr>
                    <td>Four</td>
                    <td>four</td>
                </tr>
            </table>
    </body>
</html>

Output:

HTML table alternate row color

For column try this logic-

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Tip: How to HTML table inside table? (Nested table)

So, You really Want A Table Inside A Table? see below code.

<!DOCTYPE html>
<html>
        
        <body>
            <table border="1">
                <tr>
                    <td>First cell in first table. The cell to the right has the second table in it.</td>
                    <td>
                        
                         <table border="1">
                            <tr><td>nested table</td></tr>
                            <tr><td>nested table</td></tr>
                        </table>
                        
                    </td>
                </tr>
            </table>
    </body>
</html>

Output:

Nested table inside

Note: In this tutorial, we are not adding an all html table attributes list. Only top used attributes for table tag in Html are covered in this tutorial.

Bonus: This is basic of the table for web designing. Three is a lot of things you can do table design in HTML. Follow this link – https://www.smashingmagazine.com/2008/08/top-10-css-table-designs/

If you have any doubt and suggestions regarding this tutorial, then do comment in below.

Note: The All  Examples HTML table codeare tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.