CSS Tables

Tables in HTML are used to display data in a tabular format, with rows and columns. They are created using the <table> element, and each row is defined using the <tr> element, while individual cells are defined using the <td> element.

You can also use the <th> element to define header cells, which are typically used to label the columns and rows in the table. You can also use CSS styles to format and style the table, such as setting the border, background color, font, and more.

Table Borders

There are several ways to set the border of a table in CSS, but one of the most common ways is to use the border property on the <table> element. This property allows you to set the border width, style, and color all at once.

Here is an example of setting the border of a table to have a width of 1px, solid style, and black color:

table {
  border: 1px solid black;
}

You can also use the border-width, border-style, and border-color properties to set each aspect of the border separately,

table {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

You can also set the border on individual cells of the table using the <td> or <th> elements.

td, th {
  border: 1px solid black;
}

You can use different properties to set different borders on the table-row, table-cell, table-caption and table-column.

table {
  border-collapse: collapse; /*This is to make all the borders together*/
}

td, th {
  border: 1px solid black;
}

You can use different border styles like dotted, double, groove, ridge, inset, outset, none, hidden and inherit.

Full-Width Table

To set a full-width table in CSS, you can use the width property and set it to 100%. This will make the table take up the full width of its containing element.

Here’s an example:

table {
  width: 100%; /* This will make the table take up the full width of its containing element */
}

You can also use the max-width property in case you want to set a maximum width for your table.

table {
  max-width: 100%; /* This will make the table take up the full width of its containing element, but not exceed it */
}

Another option is to use the display: block; property to make the table take up the full width of its parent container.

table {
  display: block; /* This will make the table take up the full width of its containing element */
}

You can also use margin: 0 auto; for center aligning the table. This will make the table horizontally center aligned.

table {
  margin: 0 auto; /* This will center the table horizontally within its containing element */
}

You can use table-layout: fixed; to make the table take up the entire width of its parent container.

table {
  table-layout: fixed; /* This will make the table take up the entire width of its parent container */
}

You can also use overflow-x: auto; to add horizontal scrollbar to the table in case it exceeds the parent container’s width.

table {
  overflow-x: auto; /* This will add horizontal scrollbar to the table if it exceeds the parent container's width */
}

Horizontal and Vertical Alignment

In CSS, you can use the text-align property to align the text within the table cells horizontally, and the vertical-align property to align the text within the table cells vertically.

Here’s an example of how you can use the text-align property to align the text in all table cells to the center:

td, th {
  text-align: center; /* This will center align all the text within the table cells */
}

You can also use left, right and justify as the value for text-align property to align the text in different directions.

To align the text within the table cells vertically, you can use the vertical-align property.

td, th {
  vertical-align: middle; /* This will vertically center align all the text within the table cells */
}

You can also use top, bottom, baseline as the value of the vertical-align property to align the text in different directions.

You can also align the table cells individually by using text-align and vertical-align properties on the specific cells.

#first-cell {
  text-align: right; /* This will right align the text in the first cell */
  vertical-align: bottom; /* This will align the text in the first cell to the bottom */
}

You can also use text-align and vertical-align properties to align the text inside the caption element.

caption {
  text-align: center; /* This will center align the text in the caption */
  vertical-align: top; /* This will align the text in the caption to the top */
}

You can use these properties as per your requirement and design.

Related Posts: