HTML Tables

Used to organize and present data in a structured tabular format on a web page.
Tables consist of rows and columns, where each cell can contain text, images, or other HTML elements.
The basic structure of an HTML table involves using the <table>, <tr>, <td>, and optionally, <th> elements.

Table Tag

Description

<table>

Defines a table, acting as a container for rows and columns

<tr>

Defines a row within the table.

<td>

Represents a standard data cell within a table row.

<th>

Defines a header cell within a table row, typically used for column headings.

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Example</title>
</head>
<body>

<table>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
</table>

</body>
</html>

Table Attributes

There are many attributes let's get into it

Table Attribute

Description

Example

border

Specifies the width of the border around the table and its cells

Run

width

Sets the width of the table

Run

cellspacing

Defines the space between cells

Run

cellpadding

Specifies the space between cell content and cell borders

Run

align

Aligns the table on the page. Values can be "left," "center," or "right."

Run

bgcolor

Sets the background color of the table

Run

summary

Provides a summary or description of the table's content

Run

caption

Adds a caption to the table.

Run

colspan

Merges multiple columns into one

Run

rowspan

Merges multiple rows into one

Run


HTML Table Borders

The border of the table will have it own border for each tag.
To avoid that set the border-collapse style to collapse.

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Example</title>
</head>
<body>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse; 
}
</style>
<table>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
</table>

</body>
</html>

Refer: Know more about the border styles here.

Quick Recap - Topics Covered

HTML Tables
Table Attributes
Table Borders

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now


Example 1
Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK