HTML Table
HTML tables allow web
authors to arrange data
like text, images, links,
other tables, etc. into
rows and columns of cells.
HTML Tables contd
An HTML table is defined
with the <table> tag.
Each table row is defined
with the <tr> tag.
HTML Tables contd
A table header is defined
with the <th> tag.
By default, table
headings are bold and
centered.
HTML Tables contd
A table data / cell is
defined with the <td> tag.
The elements under <td>
are regular and left aligned
by default.
HTML Tables contd
The <td> elements are the
data containers of the table.
They can contain all sorts of
HTML elements: text,
images, lists, other tables,
etc.
Cellpadding & Cellspacing
The <td> elements are the
data containers of the table.
They can contain all sorts of
HTML elements: text,
images, lists, other tables,
etc.
Adding Borders
For example:
<table border=1>
<tr>
<th>Column 1</th><th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td><td>Cell 4</td>
</tr>
</table>
For example:
<table style=border:1px dotted
black;>
<tr>
<th>Column 1</th><th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td><td>Cell 4</td>
</tr>
</table>
For example:
<table style=border:1px solid black;>
<tr>
<th>Column 1</th><th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td><td>Cell 4</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>15</td>
</tr>
<tr>
<td>Jill</td> Note: The <td> elements are the
<td>Jackson</td> data containers of the table.
They can contain all sorts of
<td>24</td> HTML elements; text, images,
</tr> lists, other tables, etc.
</table>
<tr>
<!DOCTYPE html> <td>Jill</td>
<html> <td>Smith</td>
<head> <td>50</td>
<style> </tr>
table, th, td { <tr>
border: 1px solid black; <td>Eve</td>
} <td>Jackson</td>
</style> <td>94</td>
</head> </tr>
<body> <tr>
<td>John</td>
<table style="width:100%"> <td>Doe</td>
<tr> <td>80</td>
<th>Firstname</th> </tr>
<th>Lastname</th> </table>
<th>Age</th>
</tr> </body>
</html>
Borders on Table Cells
You can apply border codes
against the individual table cells.
You can also apply a different
colored border around the table.
This will help distinguish
between the table border and the
cell borders.
For example:
<table style=border:1px solid black;>
<tr>
<th style=border:1px solid red;>Column 1</th>
<th style=border:1px solid red;>Column 2</th>
</tr>
<tr>
<td style=border:1px solid red;>Cell 1</td>
<td style=border: 1px solid red;>Cell 2</td>
</tr>
<tr>
<td style=border:1px solid red;>Cell 3</td>
<td style=border:1px solid red;>Cell 4</td>
</tr>
</table>
The result will be:
Border Collapse
Spaces can be removed between the
different borders by using the CSS
border-collapse property.
When applied this against the table
element, the table border will simple
disappear or collapses.
Spaces in between will also collapse.
For example:
<table style=border:1px solid black; border-
collapse:collapse;>
<tr>
<th style=border:1px solid red;>Column 1</th>
<th style=border:1px solid red;>Column 2</th>
</tr>
<tr>
<td style=border:1px solid red;>Cell 1</td>
<td style=border: 1px solid red;>Cell 2</td>
</tr>
<tr>
<td style=border:1px solid red;>Cell 3</td>
<td style=border:1px solid red;>Cell 4</td>
</tr>
</table>
