CSS Table Style

Table Padding

In CSS, you can use the padding property to add space around the contents of a table cell. The padding is the space between the content of a cell and its border.

Here's an example of how you can use the padding property to add 10px of padding on all sides of the table cells:

td, th {
  padding: 10px; /* This will add 10px of padding on all sides of the table cells */
}

You can also specify the padding for each side separately by using the properties padding-top, padding-right, padding-bottom, and padding-left.

td, th {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 20px;
}

You can also apply padding to the specific cells of the table individually by using the class or id selector.

#first-cell {
  padding: 10px; /* This will add 10px of padding on all sides of the first cell */
}
.second-cell {
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 20px;
}

You can use the padding property to create space between the cells and the table border, and between the content and the cell's border. This can help to improve the readability and visual appeal of your table.

Be aware that when you use the padding property, the table cells will increase in size, so you should make sure that the table will still fit within the width of the containing element.

Horizontal Dividers

In HTML tables, you can use the <hr> (horizontal rule) tag to create horizontal dividers to separate sections of the table. The <hr> tag is a self-closing tag, which means it does not have an end tag.

Here's an example of how you can use the <hr> tag to create a horizontal divider between two rows of a table:

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td colspan="2"><hr></td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

You can also use CSS to style the <hr> tag, such as setting the border width, color, and style.

hr {
  border-width: 1px; /* This will set the border width of the horizontal rule to 1px */
  border-color: black; /* This will set the border color of the horizontal rule to black */
  border-style: solid; /* This will set the border style of the horizontal rule to solid */
}

You can also use CSS border property to set the width, style, and color of the horizontal divider.

hr {
  border: 1px solid black; /* This will set the border width to 1px, style to solid and color to black */
}

Another way to create horizontal dividers is to use the border-top and border-bottom properties on the <tr> element.

tr {
  border-top: 1px solid black; /* This will create a horizontal divider on top of the row */
  border-bottom: 1px solid black; /* This will create a horizontal divider on bottom of the row */
}

You can use these different methods as per your requirement and design.

Hoverable Table

In CSS, you can use the :hover pseudo-class to create a hover effect on a table row or cell. When the user hovers over the table row or cell, the specified styles will be applied.

Here's an example of how you can use the :hover pseudo-class to change the background color of a table row when the user hovers over it:

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>
tr:hover {
  background-color: #f5f5f5; /* This will change the background color of the table row to #f5f5f5 when the user hovers over it */
}

You can also change the hover effect for a specific cell using the :hover pseudo-class on <td> or <th> elements.

td:hover {
  background-color: #f5f5f5; /* This will change the background color of the table cell to #f5f5f5 when the user hovers over it */
}

You can also use other CSS properties such as color, font-weight, border-color and many more to create different hover effects.

tr:hover {
  background-color: #f5f5f5; 
  color: #000; /* This will change the text color of the table row to black when the user hovers over it */
  font-weight: bold; /* This will make the text bold when the user hovers over it */
}

You can also use :active pseudo class to change the appearance of the table row or cell when the user clicks on it.

tr:active {
  background-color: #f5f5f5; /* This will change the background color of the table row to #f5f5f5 when the user clicks on it */
}

You can use these different methods as per your requirement and design.

Striped Table

In CSS, you can use the :nth-child pseudo-class to create a striped effect on a table. The :nth-child pseudo-class allows you to select a specific child element of a parent element based on its position.

Here's an example of how you can use the :nth-child pseudo-class to alternate the background color of table rows:

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
  </tr>
  <tr>
    <td>Row 4, Cell 1</td>
    <td>Row 4, Cell 2</td>
  </tr>
</table>
tr:nth-child(odd) {
  background-color: #f5f5f5; /* This will set the background color of the odd-numbered rows to #f5f5f5 */
}

tr:nth-child(even) {
  background-color: #ffffff; /* This will set the background color of the even-numbered rows to #ffffff */
}

You can also use :nth-child(2n+1) to select the odd numbered rows

tr:nth-child(2n+1) {
  background-color: #f5f5f5; /* This will set the background color of the odd-numbered rows to #f5f5f5 */
}

You can also use :nth-child(2n) to select the even numbered rows

tr:nth-child(2n) {
  background-color: #ffffff; /* This will set the background color of the even-numbered rows to #ffffff */
}

You can also apply the striped effect to specific columns using the :nth-child pseudo-class on <td> or <th> elements.

td:nth-child(odd) {
  background-color: #f5f5f5; /* This will set the background color of the odd-numbered cells to #f5f5f5 */
}

td:nth-child(even) {
  background-color: #ffffff; /* This will set the background color of the even-numbered cells to #ffffff */
}

You can use different color combinations or other CSS properties such as color, font-weight, border-color and many more to create different striped table effects.

CSS Basics