How to Style HTML Tables with CSS

How to Style HTML Tables with CSS. Although we can use HTML tables is because in the HTML table a table-based page layout frequently performs more leisurely than the same CSS-based layout, this is primarily true of pages that have a group of content. Tables shouldn’t be utilized as layout support. And if we create HTML tables externally any styles or attributes in the browser it will be performed externally any border. Styling a table with CSS can enhance its presentation.

CSS tables are much easy to learn and use. It’s just an undertaking of identifying the similar CSS layout property states for the basic HTML table elements. With the assistance of CSS, we are competent in making some smart tables.

Read Also: What Is CSS?

A CSS (Cascading Style Sheets) table explains how to design out a set of elements in rows and columns. The default CSS connected to an HTML table is a CSS table.

• CSS has created and redesign versatility.
• It means a CSS-based design assures that you set all your styles (i.e., from small modifications to the major rules) in one place.
• By modifying the design rules you established in that style sheet, and you sway every page that refers to it.
• CSS based page design will normally arise quicker on the screen and even the download will be quicker than the table-based layout.

CSS Table Style Properties
Below are the various assets of the CSS table styles:

Read Also: Introduction to CSS controls.

How to Style HTML Tables with CSS

| Border Collapse

It is utilized to indicate whether the borders nearby the cells of a table should be separated or collapsed.

border-collapse: separate|collapse|initial|inherit;

Example:

<table id="soft1" border="1">
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<table id="soft2" border="1">
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<table id="soft3" border="1">
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<style>
#soft1 {border-collapse:separate;}
#soft2 {border-collapse:collapse;}
#soft3 {border-collapse:initial;}
</style>

| Border-spacing

It begins with the space nearby borders and the content enclosing the table. It is similar to the tag’s cellspacing attribute, besides it has an optional second value. This property works only when applied to a tag.

Read Also: CSS Selector Attributes.

border-spacing: Length|initial|inherit;

Example:

<table id="soft1" border="1">
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<table id="soft2" border="1">
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<table id="soft3" border="1">
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<style>
#soft1 {border-spacing:initial;}
#soft2 {border-spacing:initial;}
#soft3 {border-spacing:0px;}
</style>

| Caption-side

The caption-side property defines the position of a table caption. When applied to a table caption, this property determines whether the caption appears at the top or bottom of the table. A caption would frequently perform at the top of the table.

caption-side: top|bottom|initial|inherit;

Example:

<table id="soft1" border="1">
<caption>Table 1</caption>
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<table id="soft2" border="1">
<caption>Table 2</caption>
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<table id="soft3" border="1">
<caption>Table 3</caption>
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<style>
#soft1 {caption-side: bottom;}
#soft2 {caption-side: top;}
#soft3 {caption-side: initial;}
</style>

| Empty-cells

It says the browser whether it should perform a table cell that’s totally empty. It controls the rendering of the borders and background of the cells that have no visible content in a table that’s using the separated borders model.

empty-cells: show|hide|initial|inherit;

Example:

<table id="soft1" border="1">
<caption>Table 1</caption>
  <tr>
    <td>DATA</td>
    <td>#</td>
  </tr>
</table>
<table id="soft2" border="1">
<caption>Table 2</caption>
  <tr>
    <td>DATA</td>
    <td></td>
  </tr>
</table>
<table id="soft3" border="1">
<caption>Table 3</caption>
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<style>
#soft1 { empty-cells: show;}
#soft2 { empty-cells: hide;}
#soft3 { empty-cells: initial;}
</style>

| Table-Layout

Controls how a web browser brings a table and can lightly affect the speed at which the browser displays it. This property can have one of the four values.

table-layout: auto|fixed|initial|inherit;

Example:

<table id="soft1" border="1">
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<table id="soft2" border="1">
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<table id="soft3" border="1">
  <tr>
    <td>DATA</td>
    <td>Services</td>
  </tr>
</table>
<style>
#soft1 { table-layout: auto;}
#soft2 { table-layout: fixed;}
#soft3 { table-layout: initial;}
</style>

Conclusion

With the help of CSS, we can create stylish tables and we can enhance the presentation of the table.

Have a nice day.