Tables are key elements on many websites, as they allow you to organize information in a clear and concise way. However, tables can often look disorganized and unattractive, which can detract from the user experience. Fortunately, CSS provides many options for styling tables and making them more attractive and readable.
To start with, it's important to define some basic table properties using HTML tags. The `
` tag is used to create the table itself, while the `
` tag is used to define each table row and the `
` tag is used to define each table cell. Additionally, you can use the `` tag to define the table header and the `
` tag to define the table body.
One of the simplest ways to style a table is by using the `border` property, which defines the width and color of the table border and cells. For example, to set a 1-pixel black border for the entire table and cells, we can use the following CSS code:
```css
table, th, td {
border: 1px solid black;
}
```
Furthermore, it is possible to use the `padding` property to define the internal space of the table cells. For example, to set an inner spacing of 10 pixels for all table cells, we can use the following CSS code:
```css
all {
padding: 10px;
}
```
Another interesting option is to use the `background-color` property to define the background color of the table cells. For example, to set a light gray background color for all table cells, we can use the following CSS code:
```css
all {
background-color: #f2f2f2;
}
```
It is also possible to use the `text-align` property to align the contents of table cells. For example, to align all cell contents to the left, we can use the following CSS code:
```css
all {
text-align: left;
}
```
Another interesting option is to use the `border-collapse` property to define whether the table and cell borders should be merged or separated. For example, to merge table and cell borders, we can use the following CSS code:
```css
table {
border-collapse: collapse;
}
```
Finally, you can use the `font-weight` property to define the weight of the font used in the table cells. For example, to set a bold font for all table cells, we can use the following CSS code:
```css
all {
font-weight: bold;
}
```
In summary, styling tables in CSS can be a simple and effective task, as long as the correct properties are used. Using the `border`, `padding`, `background-color`, `text-align`, `border-collapse` and `font-weight` properties, you can create more attractive and readable tables for users.
Now answer the exercise about the content:
_Which CSS property is used to define the background color of table cells?
You are right! Congratulations, now go to the next page
You missed! Try again.
The background-color CSS property is specifically used to set the background color for table cells, as well as other elements. In the provided text, it highlights how background-color can be applied to table cells to improve their appearance, for example, by setting a light gray background.
