Tables In Html

The HTML table allows to arrange data like, text, images, links, forms, form fields, other tables, etc. into rows and columns of cells.

Creating HTML Tables

Tables in HTML are defined with the <table> tag.
A table is divided into rows with the <tr> tag, which stands for table row, and each row is divided into data cells with the <td> tag, which stands for table data.
A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example of HTML Table
</head>
<body>
	<table border="1">
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Carter</td>
                <td>johncarter@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John Rambo</td>
                <td>johnrambo@mail.com</td>
            </tr>
        </tbody>
    </table>
	</body>
</html>

output:

No.	Name	Email
1	John Carter	johncarter@mail.com
2	Peter Parker	peterparker@mail.com
3	John Rambo	johnrambo@mail.com

Note: Browsers built-in style sheets will display the text in the <th> element as bold and centered. But, you can override browser's default style sheet using CSS.

Table Cellpadding and Cellspacing

The cellpadding and cellspacing attributes are used to adjust white space inside a table.
cellpadding adjust the white space between table cell border and its content.
cellspacing adjust the white space between table cells.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML Table Cellpadding and Cellspacing</title>
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="5">
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Carter</td>
                <td>johncarter@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John Rambo</td>
                <td>johnrambo@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Output

No.	Name	Email
1	John Carter	johncarter@mail.com
2	Peter Parker	peterparker@mail.com
3	John Rambo	johnrambo@mail.com

Spanning Multiple Rows and Cells

Spanning allow you to extend columns and rows across multiple other columns and rows.
Normally, when we creating a table cell, it cannot pass over into the space below or above another table cell. But, you can use the colspan attribute to span multiple columns and rowspan attribute to span multiple rows in a table. Here's is an

example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML Table Rowspan and Colspan</title>
</head>
<body>
    <h2>Example of Table Rowspan</h2>
	<table border="1" cellpadding="10">
        <tr>
            <th rowspan="4">Users Info</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <<tr>
            <td>2</td>
            <td>Peter Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </table>
    <h2>Example of Table Colspan</h2>
    <table border="1" cellpadding="10">
        <tr>
            <th colspan="3">Users Info</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </table>
</body>
</html>

Output

    Example of Table Rowspan
	
        
            Users Info
        
        
            1
            John Carter
            johncarter@mail.com
        
        
            2
            Peter Parker
            peterparker@mail.com
        
        
            3
            John Rambo
            johnrambo@mail.com
        
    
    Example of Table Colspan
    
        
            Users Info
        
        
            1
            John Carter
            johncarter@mail.com
        
        
            2
            Peter Parker
            peterparker@mail.com
        
        
            3
            John Rambo
            johnrambo@mail.com

« Previous Next »