HOLLA TECH - LEARN

The Table Properties

The look of an HTML table can be greatly improved with CSS.

The border-collapse property specifies whether the table borders are collapsed into a single border or separated as default. If the borders are separate, the border-spacing property can be used to change the spacing.

The HTML: 

<table border=“1”>
   <tr>
     <td>Red</td>
     <td>Green</td>
   </tr>
   <tr>
      <td>Blue</td>
      <td>Yellow</td>
   </tr>
</table> 

The CSS: 

table {
  border-collapse: separate;
   border-spacing: 20px 40px;
}

  

Result: 

Holla Tech - Learn CSS


The caption-side Property

The caption-side property specifies the position of a table caption. The values can be set as top or bottom.
In the example below, we specify the placement of a table caption to top.

The HTML: 

<table border=“1”>
<caption>Some of Our Courses</caption>
<tr>
  <th>Course name</th>
  <th>Lessons</th>
  <th>Quizzes</th>
</tr>
<tr>
  <td>C++</td>
  <td>81</td>
  <td>363</td>
</tr>
<tr>
  <td>JavaScript</td>
  <td>48</td>
  <td>144</td>
</tr>
<tr>
  <td>HTML</td>
  <td>38</td>
  <td>119</td>
</tr>
<tr>
  <td>CSS</td>
  <td>70</td>
  <td>174</td>
</tr>
</table>

The CSS: 

caption {
   caption-side: top;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
You can copy and paste the line of codes into a text editor to play with the outputs.

The empty-cells Property
 

The empty-cells property specifies whether or not to display borders and background on empty cells in a table.
Possible values are:
show: the borders of an empty cell are rendered
hide: the borders of an empty cell are not drawn

Here is the empty-cells property that is used to hide borders of empty cells in the <table> element.

The HTML:

<table border=“1”>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td></td>
  </tr>
</table>

 

The CSS: 

table {
   border-collapse: separate;
   empty-cells: hide;
}

 

Result: 

Holla Tech - Learn CSS

TASK:
You can copy and paste the line of codes into a text editor to play with the outputs.

The table-layout Property
 

The table-layout specifies how the width of table columns is calculated. The possible values are:
auto – when column or cell width are not explicitly set, the column width will be in proportion to the amount of content in the cells that make up the column
fixed – when column or cell width are not explicitly set, the column width will not be affected by the amount of content in the cells that make up the column.

The table layout is set to auto by default.
The example below shows the difference between auto and fixed.

The HTML:

<p>Table-layout is set to <strong>auto</strong></p>
<table class=“auto”>
  <tr>
    <td width=“10%”>500.000.000.000.000</td>
    <td width=“90%”>20.000</td>
  </tr>
</table>

<p>Table-layout is set to <strong>fixed</strong></p>
<table class=“fixed”>
  <tr>
    <td width=“10%”>500.000.000.000.000</td>
    <td width=“90%”>20.000</td>
  </tr>
</table>

 

The CSS: 

table {
   border-collapse: separate;
   width: 100%;
   border: 1px solid gray;
}
td {
   border: 1px solid gray;
}
table.auto {
   table-layout: auto;
}
table.fixed {
   table-layout: fixed;
}

 

Result: 

Holla Tech - Learn CSS

TASK:
You can copy and paste the line of codes into a text editor to play with the outputs.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT