i

Learn HTML and CSS in 10 Days

Aligning Text

Apart from table borders and striping, aligning text inside the cells (both vertically and horizontally) plays an important role in formatting a table. Descriptions and names are generally flush left, while other figures and numbers are flush right.

To align the text vertically, the ‘vertical-align’ property is utilized. This property is compatible only with inline and table-cell elements. It can't be made to work with inline-block, block, or any other element levels.

The property of ‘vertical-align’ takes in different values; some of the most popular ones are ‘top’, ‘middle’, and ‘bottom’.

By reconsidering the HTML and CSS to incorporate the vertical-align and text-align properties, we can clean up the format of our table of books.

CSS

table {

  border-collapse: separate;

  border-spacing: 0;

  color: #4a4a4d;

  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;

}

th,

td {

  padding: 10px 15px;

  vertical-align: middle;

}

thead {

  background: #395870;

  color: #fff;

}

th:first-child {

  text-align: left;

}

tbody tr:nth-child(even) {

  background: #f0f0f2;

}

td {

  border-bottom: 1px solid #cecfd5;

  border-right: 1px solid #cecfd5;

}

td:first-child {

  border-left: 1px solid #cecfd5;

}

.books-title {

  color: #395870;

  display: block;

}

.item-stock,

.item-qty {

  text-align: center;

}

.item-price {

  text-align: right;

}

.item-multiple {

  display: block;

}

tfoot {

  text-align: right;

}

tfoot tr:last-child {

  background: #f0f0f2;

}