HTML Tables

Post by **C0D3D** »

Making a simple table - The most basic form of a table

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Creating Tables in HTML</title>
</head>
<body>
    <h2>HTML Table (Default Style)</h2>
    <table>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>1</td>
            <td>William James</td>
            <td>31</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Renee Lauzon</td>
            <td>50</td>
        </tr>
        <tr>
            <td>3</td>
            <td>William charles</td>
            <td>94</td>
        </tr>
    </table>
</body>
</html>

Setting the dimension of a table

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of setting HTML table dimensions</title>
</head>
<body>
	<table border="1" width="400" height="100">
        <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>
    <p><strong>Note:</strong> The CSS <code><a href="#">width</a></code> and <code><a href="#">height</a></code> property is the better way to set dimensions of a table.</p>
</body>
</html>

Specify the table caption

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML caption Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid gray;
    }
</style>
</head>
<body>
    <table>
        <caption>User Details</caption>
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Johnny</td>
                <td>johnny@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>example</td>
                <td>example@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>C0D3D</td>
                <td>codedskills1337@gmail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Tables with borders - Adding the default table borders

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML tables default border</title>
</head>
<body>
	<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>
    <p><strong>Note:</strong> The CSS <code><a href="#">border</a></code> property is the better way to set borders for tables.</p>
</body>
</html>

Sets the padding of table cells - The cellpadding attribute

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML table cellpadding</title>
</head>
<body>
    <table border="1" cellpadding="10">
        <caption>User Information</caption>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>John</td>
            <td>john@mail.com</td>
        </tr>
    </table>
    <p><strong>Note:</strong> The CSS <code><a href="#" target="_top">padding</a></code> property is the better way to control paddings of table cells.</p>
</body>
</html>

Sets the distance between table cells - The cellspacing attribute

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML table cellspacing</title>
</head>
<body>
    <table border="1" cellspacing="10">
        <caption>User Information</caption>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>John</td>
            <td>john@mail.com</td>
        </tr>
    </table>
    <p><strong>Note:</strong> The CSS <code><a href="#" target="_top">margin</a></code> property is the better way to control spacing between table cells.</p>
</body>
</html>

Table cells that span more than one row/column - The rowspan/colspan attribute

Example 7

Code: Select all

<!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</td>
            <td>john@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>peter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>C0D3D</td>
            <td>codedskills1337@gmail.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</td>
            <td>johnr@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>peter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>C0D3D</td>
            <td>codedskills1337@gmail.com</td>
        </tr>
    </table>
</body>
</html>

Column groups - The col and colgroup elements

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML table column groups</title>
</head>
<body>
	<table border="1" cellpadding="10">
        <colgroup>
            <col style="background: #bed65a;">
            <col style="background: #f8d97f;">
        </colgroup>
        <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>
</body>
</html>

HTML Tables

HTML Tables

Who is online