Table Styling with CSS

"Table Styling with CSS" is a comprehensive guide to making your tables not only functional but visually appealing. Tables are essential for organizing and presenting data.

Basics of Table Styling

Basic Table Structure

Tables consist of rows ('<tr>'), columns ('<td>' for data cells, '<th>' for header cells), and the table itself ('<table>'). Structure your table elements appropriately.

				
					

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

Changing Border and Cell Padding

Modify the border and padding properties for better visual distinction.

				
					table {
  border-collapse: collapse; /* Merge cell borders */
  width: 100%;
}

th, td {
  border: 1px solid #dddddd; /* Border color for cells */
  padding: 8px; /* Padding inside cells */
}

Alternating Row Colors

Improve readability by applying alternating colors to rows.

				
					tbody tr:nth-child(even) {
  background-color: #f2f2f2; /* Light gray background for even rows */
}

Advanced Table Styling Techniques

Hover Effects

Enhance user interaction by adding hover effects to rows.

				
					tbody tr:hover {
  background-color: #e0e0e0; /* Lighter background on hover */
}

Text Alignment

Align text within cells for a cleaner appearance.

				
					th, td {
  text-align: center; /* Center text in cells */
}

Responsive Tables

Make tables responsive by allowing horizontal scrolling on smaller screens.

				
					@media only screen and (max-width: 600px) {
  table {
    overflow-x: auto;
  }
}

Gradient Backgrounds

Create a modern and dynamic feel by applying gradient backgrounds to cells.

				
					tbody td {
  background: linear-gradient(to right, #e0f7fa, #81d4fa); /* Gradient background for cells */
}

Rounded Corners

Softening the corners can add a touch of elegance to your table.

				
					table {
  border-radius: 8px; /* Rounded corners for the entire table */
}

th, td {
  border-radius: 4px; /* Rounded corners for cells */
}

Examples

Highlighting Cells

Emphasize specific cells for important data.

				
					td.highlight {
  background-color: #ffcc00; /* Yellow background for highlighted cells */
}

Stylish Header

Style the header for a professional look.

				
					thead {
  background-color: #333; /* Dark background for header */
  color: #ffffff; /* White text color for header */
}

Collapsible Rows

Implement collapsible rows for an efficient use of space on mobile devices.

				
					@media only screen and (max-width: 600px) {
  tbody tr td:not(:first-child) {
    display: none; /* Hide cells in collapsible rows */
  }

  tbody tr.collapsible {
    cursor: pointer;
  }

  tbody tr.collapsible:hover td {
    display: table-cell; /* Reveal cells on hover */
  }
}

"Table Styling with CSS" provides you with the tools to transform plain tables into visually appealing and user-friendly components. Whether you're working with basic border adjustments or implementing advanced techniques like hover effects, thoughtful table styling contributes significantly to the overall aesthetics of your web pages. Happy Coding! ❤️