CSS Tables

In web development, CSS (Cascading Style Sheets) is used to control the presentation and layout of HTML documents. CSS tables refer to a set of properties and values in CSS that allow you to style and control the layout of tables in HTML.

HTML tables are used to organize and display data in rows and columns. While the structure of the table is defined in HTML using the <table>, <tr> (table row), <th> (table header), and <td> (table data) elements, CSS is used to enhance the visual presentation of the table.

Table Borders

In CSS, you can control the appearance of table borders using various properties. The key properties related to table borders ar

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

Example

<style>
    table, th, td {
  border: 1px solid;
}
</style>

<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>

You can click on above box to edit the code and run again.

Output

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Full-Width Table

A full-width table in the context of web development typically refers to a table that spans the entire width of its container or the viewport. This means that the table's width extends from the left edge to the right edge of the container, taking up the available horizontal space.

To create a full-width table, you can use CSS to set the width of the table to 100% of its container. Here's an example:

Example

<style>
table {
  width: 100%;
}
</style>

<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>

You can click on above box to edit the code and run again.

Output

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Collapse Table Borders

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

Example

<style>
table {
  border-collapse: collapse;
}
</style>

<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>

You can click on above box to edit the code and run again.

Output

Firstname	Lastname
Peter	Griffin
Lois	Griffin

If you only want a border around the table, only specify the border property for <table>:

Example

<style>
width: 100%;
  border: 1px solid;
}
</style>

<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>

You can click on above box to edit the code and run again.

Output

Firstname	Lastname
Peter	Griffin
Lois	Griffin