Scribd
Upload
64 views

HTML Tables: Define An HTML Table

The document discusses HTML tables and provides examples of how to structure and style tables using HTML and CSS. Key points covered include: - Using <table>, <tr>, <th>, and <td> tags to define a table with rows and cells - Adding borders, collapsing borders, adding cell padding and spacing - Left-aligning headings and making cells span columns or rows - Adding a caption

Uploaded by

chaithu goud
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
64 views

HTML Tables: Define An HTML Table

The document discusses HTML tables and provides examples of how to structure and style tables using HTML and CSS. Key points covered include: - Using <table>, <tr>, <th>, and <td> tags to define a table with rows and cells - Adding borders, collapsing borders, adding cell padding and spacing - Left-aligning headings and making cells span columns or rows - Adding a caption

Uploaded by

chaithu goud
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML Tables

❮ PreviousNext ❯

HTML tables allow web developers to arrange data into rows and columns.

Example
Company Contact

Alfreds Futterkiste Maria Anders

Centro comercial Moctezuma Francisco Chang

Ernst Handel Roland Mendel

Island Trading Helen Bennett

Laughing Bacchus Winecellars Yoshi Tannamuri

Magazzini Alimentari Riuniti Giovanni Rovelli


Try it Yourself »

Define an HTML Table


The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with
a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.


Example
A simple HTML table:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.

HTML Table - Add a Border


To add a border to a table, use the CSS border property:

Example
table, th, td {
border: 1px solid black;
}
Try it Yourself »
Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders
To let the borders collapse into one border, add the CSS border-
collapse property:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Try it Yourself »

HTML Table - Add Cell Padding


Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without
padding.

To set the padding, use the CSS padding property:

Example
th, td {
padding: 15px;
}
Try it Yourself »

HTML Table - Left-align Headings


By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example
th {
text-align: left;
}
Try it Yourself »

HTML Table - Add Border Spacing


Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example
table {
border-spacing: 5px;
}
Try it Yourself »
Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Spans Many


Columns
To make a cell span more than one column, use the colspan attribute:

Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Try it Yourself »

HTML Table - Cell that Spans Many Rows


To make a cell span more than one row, use the rowspan attribute:

Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Try it Yourself »

HTML Table - Add a Caption


To add a caption to a table, use the <caption> tag:

Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Try it Yourself »
Note: The <caption> tag must be inserted immediately after the <table> tag.

You might also like