CSS Table

CSS tables provide a way to create table layouts using HTML elements and CSS styling, offering more flexibility and control over design compared to traditional HTML tables. Here are some key points:

1. HTML Structure: CSS tables utilize regular HTML elements like <div> or <section> to create table-like layouts instead of the <table>, <tr>, and <td> tags typically used in HTML tables.
2. Display Property: To create CSS tables, you can set the CSS display property to table for the container element (referred to as the table), table-row for the rows, and table-cell for the individual cells within those rows.
3. Flexibility: CSS tables allow for more flexibility in design compared to traditional HTML tables. You can easily adjust column widths, row heights, and alignment using CSS properties like width, height, text-align, and vertical-align.

Example below specifies a solid border for <table>, <th>, and <td> elements:

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

Output

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border:

table {
  width: 100%;
  border-collapse: collapse;
}

Output

Table Width and Height

The width and height of a table are defined by the width and height properties.

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

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 70px;
}

Output

Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

To center-align the content of  <td> elements as well, use text-align: center:

td {
  text-align: center;
}

Output

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

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: left;
}

Output

Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

The following example sets the vertical text alignment to bottom for <td> elements:

td {
  height: 50px;
  vertical-align: bottom;
}

Output

Conclusion

In conclusion, CSS tables provide a versatile and modern approach to creating table layouts in web design. They offer greater flexibility, responsiveness, and styling options compared to traditional HTML tables. By utilizing CSS properties like display, width, height, and text-align, developers can create visually appealing and functional tables that enhance user experience. Additionally, CSS tables can be made accessible by ensuring proper semantic markup and providing text alternatives for assistive technologies. With the ability to handle basic to complex table structures, CSS tables empower designers and developers to create dynamic and responsive layouts that meet the needs of modern web applications.

Frequently Asked Questions