# HTML Tables
{% code overflow="wrap" lineNumbers="true" %}
```markup
HTML Table
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Centro comercial Moctezuma
Francisco Chang
Mexico
Ernst Handel
Roland Mendel
Austria
Island Trading
Helen Bennett
UK
Laughing Bacchus Winecellars
Yoshi Tannamuri
Canada
Magazzini Alimentari Riuniti
Giovanni Rovelli
Italy
```
{% endcode %}
### Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
{% code overflow="wrap" lineNumbers="true" %}
```markup
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Centro comercial Moctezuma
Francisco Chang
Mexico
```
{% endcode %}
### Table Cells
Each table cell is defined by a `
` and a `
` tag.
`td` stands for table data.
Everything between `
` and `
` are the content of the table cell.
{% code overflow="wrap" lineNumbers="true" %}
```markup
Emil
Tobias
Linus
```
{% endcode %}
### Table Rows
Each table row starts with a `
```
{% endcode %}
## HTML Table Borders
HTML tables can have borders of different styles and shapes.
### How To Add a Border
When you add a border to a table, you also add borders around each table cell:
To add a border, use the CSS `border` property on `table`, `th`, and `td` elements:
{% code overflow="wrap" lineNumbers="true" %}
```css
table, th, td {
border: 1px solid black;
}
```
{% endcode %}
### Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS `border-collapse` property to `collapse`.
This will make the borders collapse into a single border:
{% code overflow="wrap" lineNumbers="true" %}
```css
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
```
{% endcode %}
### Style Table Borders
If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:
{% code overflow="wrap" lineNumbers="true" %}
```css
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
```
{% endcode %}
### Round Table Borders
With the `border-radius` property, the borders get rounded corners:
{% code overflow="wrap" lineNumbers="true" %}
```css
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
```
{% endcode %}
Skip the border around the table by leaving out `table` from the css selector:
{% code overflow="wrap" lineNumbers="true" %}
```css
th, td {
border: 1px solid black;
border-radius: 10px;
}
```
{% endcode %}
### Dotted Table Borders
With the `border-style` property, you can set the appearance of the border.
The following values are allowed:
* `dotted`
* `dashed`
* `solid`
* `double`
* `groove`
* `ridge`
* `inset`
* `outset`
* `none`
* `hidden`
{% code overflow="wrap" lineNumbers="true" %}
```css
th, td {
border-style: dotted;
}
```
{% endcode %}
### Border Color
With the `border-color` property, you can set the color of the border.
{% code overflow="wrap" lineNumbers="true" %}
```css
th, td {
border-color: #96D4D4;
}
```
{% endcode %}
### HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire table.
Use the `style` attribute with the `width` or `height` properties to specify the size of a table, row or column.
### HTML Table Width
To set the width of a table, add the `style` attribute to the `
```
{% endcode %}
### HTML Table Row Height
To set the height of a specific row, add the `style` attribute on a table row element:
{% code overflow="wrap" lineNumbers="true" %}
```html
Firstname
Lastname
Age
Jill
Smith
50
Eve
Jackson
94
```
{% endcode %}
### HTML Table Headers
HTML tables can have headers for each column or row, or for many columns/rows.
### HTML Table Headers
Table headers are defined with `th` elements. Each `th` element represents a table cell.
{% code overflow="wrap" lineNumbers="true" %}
```markup
Firstname
Lastname
Age
Jill
Smith
50
Eve
Jackson
94
```
{% endcode %}
### Vertical Table Headers
To use the first column as table headers, define the first cell in each row as a `
```
{% endcode %}
### Align Table Headers
By default, table headers are bold and centered:
To left-align the table headers, use the CSS `text-align` property:
{% code overflow="wrap" lineNumbers="true" %}
```css
th {
text-align: left;
}
```
{% endcode %}
### Header for Multiple Columns
You can have a header that spans over two or more columns.
To do this, use the `colspan` attribute on the `
```
{% endcode %}
### HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space between the cells.
### HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS `padding` property:
{% code overflow="wrap" lineNumbers="true" %}
```css
th, td {
padding: 15px;
}
```
{% endcode %}
To add padding only above the content, use the `padding-top` property.
And the others sides with the `padding-bottom`, `padding-left`, and `padding-right` properties:
{% code overflow="wrap" lineNumbers="true" %}
```css
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
```
{% endcode %}
### HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS `border-spacing` property on the `table` element:
{% code overflow="wrap" lineNumbers="true" %}
```css
table {
border-spacing: 30px;
}
```
{% endcode %}
### HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.
### HTML Table - Colspan
To make a cell span over multiple columns, use the `colspan` attribute:
{% code overflow="wrap" lineNumbers="true" %}
```html
Name
Age
Jill
Smith
43
Eve
Jackson
57
```
{% endcode %}
### HTML Table - Rowspan
To make a cell span over multiple rows, use the `rowspan` attribute:
{% code overflow="wrap" lineNumbers="true" %}
```html
Name
Jill
Phone
555-1234
555-8745
```
{% endcode %}
### HTML Table Styling
Use CSS to make your tables look better.
### HTML Table - Zebra Stripes
If you add a background color on every other table row, you will get a nice zebra stripes effect.
To style every other table row element, use the `:nth-child(even)` selector like this:
{% code overflow="wrap" lineNumbers="true" %}
```css
tr:nth-child(even) {
background-color: #D6EEEE;
}
```
{% endcode %}
### HTML Table - Vertical Zebra Stripes
To make vertical zebra stripes, style every other *column*, instead of every other *row*.
Set the `:nth-child(even)` for table data elements like this:
{% code overflow="wrap" lineNumbers="true" %}
```css
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
```
{% endcode %}
### Combine Vertical and Horizontal Zebra Stripes
You can combine the styling from the two examples above and you will have stripes on every other row and every other column.
If you use a transparent color you will get an overlapping effect.
Use an `rgba()` color to specify the transparency of the color:
{% code overflow="wrap" lineNumbers="true" %}
```css
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
```
{% endcode %}
### Horizontal Dividers
If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.
Add the `border-bottom` property to all `tr` elements to get horizontal dividers:
{% code overflow="wrap" lineNumbers="true" %}
```css
tr {
border-bottom: 1px solid #ddd;
}
```
{% endcode %}
### Hoverable Table
Use the `:hover` selector on `tr` to highlight table rows on mouse over:
{% code overflow="wrap" lineNumbers="true" %}
```css
tr:hover {
background-color: #D6EEEE;
}
```
{% endcode %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://codingzonebd.gitbook.io/html-elements/html-tables.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.