--- title: Tables --- ### Defining an HTML Table An HTML table is defined with the `` tag. Each table row is defined with the `` tag. Inside a row there may be table headers or table data. * A table header is defined with the ``, ``, ``, ``, and `` elements in it. ### Simple Table Example ```html
` tag. By default, table headings are bold and centered. * A table data/cell is defined with the `` tag. The cells can contain all types of HTML elements such as text, images, lists, tables, etc. A more complex HTML table may also include `
`, `
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
``` DEMO ### Table Example With More Semantic Information ```html
Item Amount
Peach 15
Watermelon 3
Apple 10
``` Result:
Item Amount
Peach 15
Watermelon 3
Apple 10
### 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
Firstname Lastname Age
Jill Smith 50
Eve Jackson
``` With **Col Span** allows a single table cell to span the width of more than one cell or column. Example: ```html
Firstname Lastname Age
Jill Smith 50
Eve Jackson 50
Total: 2 Response
``` ## Adding/Removing table border The table border width can be increased/decreased using the table border attribute. ### Table Border Example ```html
Fruits Quantity
Apple 2
``` Result:
Fruits Quantity
Apple 2
```html
Fruits Quantity
Apple 2
``` Result:
Fruits Quantity
Apple 2
```html
Fruits Quantity
Apple 2
``` Result:
Fruits Quantity
Apple 2
The table can also be applied a border with the css as follows ```html table, th, td { border: 1px solid black; } ``` #### More Information: - [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) - [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/)