For working professionals
For fresh graduates
Study abroad
More

CSS Tables

Updated on 03/03/20241,886 Views

Introduction

Understanding CSS tables is crucial for developing clean, responsive web designs. In this tutorial, we will delve into the specifics of table styling in CSS, demystifying its core properties, and when to use (or avoid) tables. Let's begin our exploration.

Overview

We will cover topics such as CSS tables properties, some quick styling tips, appropriate use cases for tables, and scenarios to avoid them. Starting from the basic understanding of CSS table styles, we'll explore the range of CSS table properties.

What is Table Style in CSS?

CSS tables styling involves utilizing a broad spectrum of properties to manage the appearance and structure of HTML tables. These properties allow you to exercise extensive control over how your tables appear in a web environment. They dictate everything, from the dimensions of the table and its cells to its color scheme and text alignment.

For instance, the border property in CSS sets the boundary around table cells, creating distinct separation. The padding property adjusts the space within the cells, contributing to the readability of the table's content. With text-align, you control the alignment of text within the cells, and the color property allows you to set the text color. Lastly, background-color enables you to set a specific background color for your cells. These properties collectively help in enhancing the visual presentation and accessibility of your table data.

CSS Property	Function
border	Defines the border around table cells
padding	Controls the space within the cells
text-align	Manages text alignment in the cells
color	Determines text color
background-color	Sets the cell's background color

CSS Table Properties

In CSS, a variety of properties are dedicated specifically to styling tables. Understanding these properties allows developers to fine-tune table appearances and improve both aesthetics and user experience. Here are some essential CSS table properties:

border-collapse: This property controls the border model of the table, deciding whether the borders of the table cells should be displayed as separate or adjacent.
border-spacing: Working alongside the border-collapse property when set to separate, border-spacing defines the space between cells. This allows developers to manage the gap between cell borders.
empty-cells: This property influences the visibility of cell borders and backgrounds around empty cells. It's a useful tool for managing the presentation of empty spaces in a table.

These CSS table properties provide nuanced control over table styling, enabling the creation of visually appealing, user-friendly, and accessible tables.

CSS Table Example

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid;
}
</style>
</head>
<body>

<h2>Add a border to a table upGrad:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

CSS Table Border

As a default, the spacing present between the borders of the two cells is 2px.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border: 1px solid;
}
</style>
</head>
<body>

<h2>Single Border Around The Table</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

CSS Table Border-Spacing

Property Values:

1)Length 2)initial 3)inherit

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

#t1 {
  border-collapse: separate;
  border-spacing: 15px;
}

#t2 {
  border-collapse: separate;
  border-spacing: 15px 50px;
}
</style>
</head>
<body>

<h2>border-spacing: 15px:</h2>
<p>When using "border-collapse: separate", the border-spacing property can be used to set the space between the cells:</p>
<table id="t1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>abc</td>
    <td>xyz</td>
  </tr>
  <tr>
    <td>mno</td>
    <td>pqr</td>
  </tr>
</table>

<h2>border-spacing: 15px 50px:</h2>
<p>Using two values (the first sets the horizontal spacing and the second sets the vertical spacing):</p>
<table id="t2">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>abc</td>
    <td>xyz</td>
  </tr>
  <tr>
    <td>mno</td>
    <td>pqr</td>
  </tr>
</table>

</body>
</html>

CSS Table Border Collapse

The border-collapse property defines that the table borders can combine and become a single border (shared border) or it can be separated as in standard HTML.

Property Values:

Separate
Collapse
Initial
Inherit

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 3px solid red;
}

#tab1 {
  border-collapse: collapse;
  border-color: blue;
}

#tab2 {
  border-collapse: separate;
  border-color: blue;
}
</style>
</head>
<body>

<h2>border-collapse: collapse:</h2>
<table id="tab1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>abc</td>
    <td>xyz</td>
  </tr>
  <tr>
    <td>mno</td>
    <td>pqr</td>
  </tr>
</table>

<h2>border-collapse: separate:</h2>
<table id="tab2">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>abc</td>
    <td>xyz</td>
  </tr>
  <tr>
    <td>mno</td>
    <td>pqr</td>
  </tr>
</table>

</body>
</html>

CSS Table Padding

It defines the space between the table borders and the table content. This is applied to the <td> and <th> elements. By default, the padding is set to 0.

CSS Table Text-align

Horizontal Alignment: The text-align property allows us to set the horizontal alignment of the content in <th> or <td> (like left, right, or center). By default, the content of <th> elements is center-aligned and the content of <td> elements is left-aligned.

Vertical Alignment: The vertical-align property helps us set the vertical alignment of the content in <th> or <td> (like top, bottom, or middle). By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

CSS Table Background-Color

This property allows us to manipulate the font color of table data.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  background-color: coral;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

CSS Table Height and Width

CSS Table Table-Layout

In CSS, there are multiple ways to control the layout of HTML tables. CSS provides a property called table-layout that determines how a table should be rendered regarding its width and cell layout.

Here are some common CSS properties and techniques used to manage the layout of tables:

table-layout: auto: The default value. The table will be sized based on its content. Column widths will be determined by the content of the cells.
table-layout: fixed: The table and column widths will be determined by the width of the table itself and any specified column widths. This can be more predictable for layout purposes.
Table-layout:initial: Sets this property to its default value.
Table-layout:inherit: Inherits this property from its parent element.

Code:

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}

h1 {
color: red;
}

table.one {
width: 80px border-collapse: separate;
border-spacing: 10px;

/* Layout of table is auto. */
table-layout: auto;
}

table.two {
width: 80px border-collapse: separate;
border-spacing: 10px;
/* Layout of table is fixed. */
table-layout: fixed;
}

table,
td,
th {
border: 1.5px solid blue;
width: 80px;
}
</style>
</head>

<body>
<h1>upGradTutorial</h1>
<h2>auto table layout:</h2>
<table class="one">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<h2>fixed table layout:</h2>
<table class="two">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>

</html>

CSS Table: Styling Even and Odd Cells

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>

<h2>upGradTutorial</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Meaning of Each HTML Table Tags

HTML table tags are used to create tabular data structures on a web page. They allow you to organize data into rows and columns, making it easy to present information in a structured and readable format. The basic HTML table structure involves three main tags:

<table>: This is the container element for the entire table. It encompasses all the rows and cells within the table.

<tr>: This tag represents a table row. It is used to group a set of table cells (td or th) that make up a single row of the table.

<td> and <th>: These tags represent table cells. <td> stands for "table data" and is used for regular data cells, while <th> stands for "table header" and is used for header cells. Header cells are typically bold and centered, and they provide labels for the data cells in that column or row.

Table Styling Quick Tips

Creating an appealing, easy-to-read CSS tables list involves various tactics.

Consistent Typography: To achieve a clean and coherent look, it's crucial to maintain a consistent font family and size throughout the table. This enhances readability and lends a professional touch to your design. For instance, avoid mixing serif and sans-serif fonts in the same table.
Use Colors Wisely: Colors can serve as a powerful tool for emphasizing important data or distinguishing between different types of information. However, excessive use can make your table look cluttered. Always strive for a balanced color scheme that complements your overall page design.
Whitespace Management: Managing whitespace effectively can greatly improve the readability of your table. Use cell padding to ensure text doesn't cluster too closely together. A well-spaced table is easier on the eyes and contributes to cleaner aesthetics.

Remember, the key to great table styling is balance - keeping elements consistent, using colors strategically, and managing whitespace effectively can make your tables much more engaging and user-friendly.

When to Use Tables?

Stylish CSS tables are ideal for presenting data in a structured manner, especially when the data is comparative or interconnected. This could include displaying database content, financial data, schedules, or any form of tabular data.

When Not to Use Tables?

Tables should not be used for web page layout as it makes the webpage heavy, negatively affecting load times and overall performance. CSS offers other layout techniques like flexbox and grid that are more efficient and flexible.

Conclusion

CSS tables are a powerful tool for presenting data, offering significant control over the style and presentation of tabular data. Understanding when and how to use them enhances your web development skills and helps to create more efficient, user-friendly webpages. With practice, these concepts will become second nature, allowing you to bring complex data presentations to life with ease.

As you continue your journey in web development with upGrad, remember the value of continuous learning. CSS is a powerful tool in your developer's toolkit, and mastering its use will open the doors to more advanced and interactive web design techniques. Happy coding!

FAQs

What is the role of CSS in creating responsive tables?

CSS plays a crucial role in creating responsive tables that adjust according to the viewport size. By utilizing properties like overflow, or using media queries, developers can ensure tables display effectively on different screen sizes.

Are there tools available like a CSS table generator for creating table styles quickly?

Yes, there are numerous online CSS table generators that can help you create table styles quickly. These tools generate the CSS and HTML code that you can then customize and incorporate into your project.

Can I create CSS tables with border that are rounded?

Absolutely! With CSS3, you can use the border-radius property to create tables with rounded borders, adding a unique aesthetic touch to your design.

How can CSS table style examples help in learning table styling?

Looking at CSS table style examples can provide inspiration and serve as practical learning tools. By studying various examples, you can learn different ways to use CSS properties and grasp how to create a specific look or functionality.