HTML - Table Styling

Hello there, future web developers! I'm thrilled to be your guide on this exciting journey into the world of HTML table styling. As someone who's been teaching computer science for years, I can tell you that mastering table styling is like learning to paint - it starts with understanding your canvas and tools. So, let's dive in and make those tables look fabulous!

Normal HTML Table

Before we start adding style to our tables, let's remind ourselves what a basic HTML table looks like. Here's a simple example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <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>

This code creates a basic table with two columns and three rows (including the header row). It's functional, but let's be honest, it's about as exciting as watching paint dry. That's where styling comes in!

HTML Table Styles

Now, let's talk about the different ways we can style our tables. Think of these as the brushes and colors in your web design toolkit:

Property	Description
border	Sets the border around the table and cells
border-collapse	Determines whether cell borders are collapsed into a single border or separated
width	Sets the width of the table
height	Sets the height of the table
text-align	Aligns the text in cells (left, right, center)
vertical-align	Aligns the text vertically in cells (top, middle, bottom)
padding	Sets the space between the cell border and its content
background-color	Sets the background color of the table or cells
color	Sets the text color
font-family	Sets the font for the text
font-size	Sets the size of the text

HTML Table Styling Examples

Let's put these properties into action with some examples. I promise, by the end of this, you'll be styling tables like a pro!

Example 1: Basic Table Styling

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
  </tr>
</table>

In this example, we've added some basic styling. The border-collapse: collapse property merges cell borders, creating a cleaner look. We've set the table width to 100% of its container, added borders to cells, included some padding, and given the header a light gray background. It's like giving your table a neat haircut and a fresh shirt!

Example 2: Zebra Striping

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1.00</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$0.75</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>$0.90</td>
  </tr>
</table>

Here, we've introduced the concept of zebra striping. The tr:nth-child(even) selector targets even rows and gives them a light gray background. This alternating color scheme makes it easier for users to follow rows across the table. It's like giving your table a stylish pinstripe suit!

Example 3: Responsive Table

<style>
  .responsive-table {
    overflow-x: auto;
  }
  table {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  @media screen and (max-width: 600px) {
    th, td {
      display: block;
    }
    tr {
      margin-bottom: 15px;
    }
    th {
      text-align: center;
    }
  }
</style>

<div class="responsive-table">
  <table>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
    </tr>
  </table>
</div>

This example introduces responsiveness to our table. On larger screens, it behaves like a normal table. But on smaller screens (less than 600px wide), it switches to a card-like layout where each cell is displayed as a block. It's like teaching your table to do yoga - it becomes flexible and adapts to different screen sizes!

Conclusion

And there you have it, folks! We've taken our tables from plain and boring to stylish and responsive. Remember, styling tables is all about enhancing readability and user experience. It's not just about making things pretty (although that's fun too!).

As you continue your web development journey, keep experimenting with different styles. Maybe try adding hover effects to rows, or play with different color schemes. The possibilities are endless!

Just like how a good meal isn't complete without the right presentation, a well-structured HTML document isn't complete without properly styled tables. So go forth and style those tables! And remember, in the world of web development, practice makes perfect. Happy coding!

Credits: Image by storyset