Week 5_1(en): Styling HTML Tables

Styling HTML Tables

Let's try adding style to our HTML table!

Please download the following files and save them in your new date-name directory.
index.html
blog.css
seoul.jpg

First, I will change the text alignment of the first row to left.

table th {
  text-align: left;
}

Then let's make a shadow below our first row.

tr {
  box-shadow: 0 5px 5px -5px rgb(192, 192, 192);
}

For the box-shadow property, below are what you can specify.

• h-offset: Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box.
• v-offset: Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box.
• blur: Optional. The blur radius. The higher the number, the more blurred the shadow will be.
• spread: Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• color: Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.

Then, let's add padding to each table cell.

table th, table td {
  padding: 10px;
}

Now let's set a background color and some other properties for the whole table.

table {
  font-size: 85%;
  background-color: #fff;
  box-shadow: 0 0 5px rgb(192, 192, 192);
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
}

If you want to change the color of some columns, you can use the following code.

tbody tr:nth-child(odd) {
  background-color: #fdcffc;
}

:nth-child(odd) or :nth-child(even) can be used to only select elements that are the odd or even children of its parent.
You can also put in numbers instead of odd or even.
For example, p:nth-child(1) will select every <p> element that is the first child of its parent.

To get rid of the border lines in between table cells, you can add the following code.

table {
  border-spacing: 0;
}

The border-spacing property sets the distance between the borders of adjacent cells.

You can try styling your own table using what we have learned!