Tables
HTML Tables
• An HTML Table is an arrangement of data
in rows and columns in tabular format.
• Tables are useful for various tasks, such as
presenting text information and numerical
data.
• Tables are also used to create databases.
TableTags
HTML Tags Descriptions
Defines the structure for organizing data in rows and
<table>
columns within a web page.
Represents a row within an HTML table, containing
<tr>
individual cells.
Shows a table header cell that typically holds titles or
<th>
headings.
<td> Represents a standard data cell, holding content or data.
TableTags
HTML Tags Descriptions
Defines the header section of a table, often containing
<thead>
column labels.
Represents the main content area of a table, separating it
<tbody>
from the header or footer.
Specifies the footer section of a table, typically holding
<tfoot>
summaries or totals.
<caption> Provides a title or description for the entire table.
• Table Cells
• Table Cell are the building blocks for defining
the Table. It is denoted with <td> as a start tag
& </td> as a end tag.
• Syntax
• </td> Content...</td>
• Table Rows
• The rows can be formed with the help of
combination of Table Cells. It is denoted by
<tr> and </tr> tag as a start & end tags.
• Syntax
• </tr> Content...</tr>
• Table Headers
• The Headers are generally use to provide the
Heading. The Table Headers can also be used
to add the heading to the Table. This contains
the <th> & </th> tags.
• Syntax
• </th> Content...</th>
• Adding a border to an HTML Table
• A border is set using the CSS border property.
If you do not specify a border for the table, it
will be displayed without borders.
• Syntax
• table, th, td {
border: 1px solid black;
}
• Adding Collapsed Borders in an HTML Table
• For borders to collapse into one border, add
the CSS border-collapse property.
• Syntax
• table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
• Adding center Align Headings and data in an
HTML Table
• By default, the table headings are bold and
centered.
• To center-align the table headings and data, we
must use the CSS text-align property.
• Syntax
• th,td {
text-align: center;
}
• Adding Cells that Span Many Columns in
HTML Tables
• To make a cell span more than one column,
we must use the colspan attribute.
• Ex <td colspan="2">
• Adding Cells that span many rows in HTML
Tables
• To make a cell span more than one row, we
must use the rowspan attribute.
• Ex <tr rowspan="2">
• Adding a Background Colour to the Table
• A color can be added as a background in an
HTML table using the “background-color”
option.
• Syntax
• table {
width: 100%;
background-color: gray;
}
