2018-10-04 14:47:55 +01:00
|
|
|
---
|
|
|
|
|
title: Tables
|
|
|
|
|
---
|
|
|
|
|
### Defining an HTML Table
|
|
|
|
|
|
2018-10-15 22:43:43 +02:00
|
|
|
An HTML table is defined with the `<table>` tag.
|
2018-10-04 14:47:55 +01:00
|
|
|
|
2018-10-15 22:43:43 +02:00
|
|
|
Each table row is defined with the `<tr>` tag. Inside a row there may be table headers or table data.
|
2018-10-04 14:47:55 +01:00
|
|
|
|
2018-10-15 22:43:43 +02:00
|
|
|
* A table header is defined with the `<th>` tag. By default, table headings are bold and centered.
|
2019-01-03 08:04:26 -07:00
|
|
|
* A table data/cell is defined with the `<td>` tag. The cells can contain all types of HTML elements such as text, images, lists, tables, etc.
|
2018-10-04 14:47:55 +01:00
|
|
|
|
|
|
|
|
A more complex HTML table may also include `<caption>`, `<col>`, `<colgroup>`, `<thead>`, `<tfoot>`, and `<tbody>` elements in it.
|
|
|
|
|
|
|
|
|
|
### Simple Table Example
|
|
|
|
|
```html
|
|
|
|
|
<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>
|
|
|
|
|
```
|
|
|
|
|
<a href='https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table'> DEMO </a>
|
|
|
|
|
|
2019-01-18 17:43:47 -05:00
|
|
|
### Table Example With More Semantic Information
|
2018-10-04 14:47:55 +01:00
|
|
|
```html
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<body>
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Item</th>
|
|
|
|
|
<th>Amount</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Peach</td>
|
|
|
|
|
<td>15</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Watermelon</td>
|
|
|
|
|
<td>3</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
2018-11-22 02:23:52 -05:00
|
|
|
<tfoot>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Apple</td>
|
|
|
|
|
<td>10</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tfoot>
|
2018-10-04 14:47:55 +01:00
|
|
|
</table>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
Result:
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Item</th>
|
|
|
|
|
<th>Amount</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Peach</td>
|
|
|
|
|
<td>15</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Watermelon</td>
|
|
|
|
|
<td>3</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
2018-11-22 02:23:52 -05:00
|
|
|
<tfoot>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Apple</td>
|
|
|
|
|
<td>10</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tfoot>
|
2018-10-04 14:47:55 +01:00
|
|
|
</table>
|
2019-01-19 05:32:54 +07:00
|
|
|
|
|
|
|
|
|
|
|
|
|
### Using Row Span and Col Span Attribute
|
|
|
|
|
With **Row Span** allows a single table cell to span the height of more than one cell or row.
|
|
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Firstname</th>
|
|
|
|
|
<th>Lastname</th>
|
|
|
|
|
<th>Age</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Jill</td>
|
|
|
|
|
<td>Smith</td>
|
|
|
|
|
<td rowspan="2">50</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Eve</td>
|
|
|
|
|
<td>Jackson</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
With **Col Span** allows a single table cell to span the width of more than one cell or column.
|
|
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<table>
|
|
|
|
|
<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>50</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="3">Total: 2 Response</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
```
|
2018-10-04 14:47:55 +01:00
|
|
|
|
2018-10-28 23:47:18 +05:30
|
|
|
## Adding/Removing table border
|
|
|
|
|
The table border width can be increased/decreased using the table border attribute.
|
2018-10-04 14:47:55 +01:00
|
|
|
|
2018-10-28 23:47:18 +05:30
|
|
|
### Table Border Example
|
|
|
|
|
```html
|
|
|
|
|
<table border = "1">
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Fruits</th>
|
|
|
|
|
<th>Quantity</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Apple</td>
|
|
|
|
|
<td>2</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
```
|
|
|
|
|
Result:
|
|
|
|
|
<table border = "1">
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Fruits</th>
|
|
|
|
|
<th>Quantity</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Apple</td>
|
|
|
|
|
<td>2</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
2018-10-04 14:47:55 +01:00
|
|
|
|
2018-10-28 23:47:18 +05:30
|
|
|
```html
|
|
|
|
|
<table border = "0">
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Fruits</th>
|
|
|
|
|
<th>Quantity</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Apple</td>
|
|
|
|
|
<td>2</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
```
|
|
|
|
|
Result:
|
|
|
|
|
<table border = "0">
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Fruits</th>
|
|
|
|
|
<th>Quantity</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Apple</td>
|
|
|
|
|
<td>2</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<table border = "2">
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Fruits</th>
|
|
|
|
|
<th>Quantity</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Apple</td>
|
|
|
|
|
<td>2</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
```
|
|
|
|
|
Result:
|
|
|
|
|
<table border = "2">
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Fruits</th>
|
|
|
|
|
<th>Quantity</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Apple</td>
|
|
|
|
|
<td>2</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
|
2018-12-29 21:49:04 +00:00
|
|
|
The table can also be applied a border with the css as follows
|
|
|
|
|
```html
|
|
|
|
|
table, th, td {
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2018-10-28 23:47:18 +05:30
|
|
|
#### More Information:
|
2019-01-01 00:06:52 +07:00
|
|
|
- [MDN - table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
|
|
|
|
|
- [YouTube - HTML Tables Tutorial](https://www.youtube.com/watch?v=BczLWImAmBk)
|
|
|
|
|
- [W3C HTML Tables](https://www.w3schools.com/html/html_tables.asp)
|
2019-01-03 08:04:26 -07:00
|
|
|
- [MDN Article on the HTML <table> tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
|
|
|
|
|
- [Tables with Multi-level Headers](https://www.w3.org/WAI/tutorials/tables/multi-level/)
|
