CSS table property | htmlcode

CSS tables

You can use CSS to add a style of choice in table elements. The table is used to mark-up the tabular data on web pages. Sometimes the table is used to design HTML layouts.

Style the table borders:

You can style your table with the border effect of the CSS border property. Each border can be styled individually by border property.

Coding format such as:

table, td, th {border: 2px red solid;}

Example:

HTML Code:

<html>
<body>
<style>
td, th {background: lightblue; width: 4rem; height: 2rem; border: 1px solid red; text-align: center;}
body{font-family:Verdana;}
</style>
<table width=50%>
<tr><td>Type</td><td>Manufacturer</td><td>Price</td></tr>
<tr><td>Laptop</td><td>Dell</td><td>$800</td></tr>
<tr><td>Laptop</td><td>Toshiba</td><td>$700</td></tr>
<tr><td>Laptop</td><td>HP</td><td>$750</td></tr>
</table>
</body>
</html>

Disply in Browser:

css table

Notice the example above. Here <td> and <th> tag are styled by the CSS property. As a result the table is influenced by the CSS property. This is way, you can style the table.

CSS border collapse property:

There is a space between the two cells on the table. You can use this property to remove or control the space. It has two values. Such as:

PropertyValueDescription
border-collapseCollapse

The table borders are turned into single borders with collapses.

separate

Table cells creates a gap between each other (default).

 

Coding format:

table{border: 2px #000000 solid; border-collapse: collapse;}

Example:

HTML Code:

<html>
<body>
<style>
table{border-collapse: collapse; width:50%;}
td, th {background: lightblue; width: 4rem; height: 2rem; border: 1px solid blue; text-align: center;}
body{font-family:Verdana;}
</style>
<table>
<tr><td>Type</td><td>Manufacturer</td><td>Price</td></tr>
<tr><td>Laptop</td><td>Dell</td><td>$800</td></tr>
<tr><td>Laptop</td><td>Toshiba</td><td>$700</td></tr>
<tr><td>Laptop</td><td>HP</td><td>$750</td></tr>
</table>
</body>
</html>

Display in Browser:

css border-collapse property

Notice here, in the example above, collapse has been used as the value of border collapse. As a result, the table borders have become single borders with collapses. If you use separate as the value of border-collapse, you will see the borders have made gap between each other.

CSS empty – cells property :

This property is used to determine how borders will be placed in zero cells. This property has two values. Values are shown (default) and hide.

Coding format:

table {border: 2px #000000 solid; empty-cells: hide;}

Example:

HTML Code:

<html>
<body>
<style>
td, th {background: lightblue; width: 4rem; height: 2rem; border: 1px solid red; text-align: center;}
body{font-family:Verdana;}
table{border-collapse:separate;empty-cells:hide;}
</style>
<table width=50%>
<tr><td>Type</td><td>Manufacturer</td><td>Price</td></tr>
<tr><td>Laptop</td><td>Dell</td><td>$800</td></tr>
<tr><td>Laptop</td><td></td><td>$700</td></tr>
<tr><td>Laptop</td><td>HP</td><td>$750</td></tr>
</table>
</body>
</html>

Display in Browser:

css table empty-cells

CSS table with separate border:

The border-spacing properties are more subtle than border-collapse properties to control the space between the cells of the table. The size of the table can be made more beautiful by border-spacing with border-collapse properties. It can only be a positive value which can be expressed by pixels (PX) or any other length (eg: cm).

Example:

HTML Code:

<html>
<body>
<style>
table{border-collapse: separate; border-spacing:10px;}
td, th {background: lightblue; width: 4rem; height: 2rem; border: 1px solid blue; text-align: center;}
body{font-family:Verdana;}
</style>
<table border="2" width="50%">
<tr><td>Type</td><td>Manufacturer</td><td>Price</td></tr>
<tr><td>Laptop</td><td>Dell</td><td>$800</td></tr>
<tr><td>Laptop</td><td>Toshiba</td><td>$700</td></tr>
<tr><td>Laptop</td><td>HP</td><td>$750</td></tr>
</table>
</body>
</html>

Display in Browser:

css separate border table

The above example uses 10 pixels as the value of border-spacing, which means the distance between each cell is 10 pixels. That means as you increase the value of border-spacing, the space between the table’s cells will increase as much as possible.

CSS caption-side property :

There is an identification caption for almost every table. The caption-side property is used to determine the caption. The values that this property receives are:

PropertyValueDescription
 

caption-side

topCaption to the top side of the table (default).
bottomCaption to the bottom side of the table (default).
leftCaption to the left side of the table (default).
rightCaption to the right side of the table (default).

 

Example: CSS tbody, tfoot

HTML Code:

<html>
<style>
table{background-color:#ccc; caption-side: top;}
table,th td{border:1px solid blue; text-align:center;}
body{font-family:verdana;}
</style>
<table border=1 cellspacing=1 width=50%>
<caption><b>First Quarter Sales Report</b></caption>
<tr>
<th>Month</th><th>Desktop</th><th>Laptop</th>
<tbody>
</tr> 

<tr>
<td>January</td><td>1000</td><td>2000</td>
</tr>

<tr>
<td>February</td><td>1200</td><td>1700</td>
</tr>

<tr>
<td>March</td><td>1500</td><td>1900</td>
</tr>

<tr>
<td>April</td><td>2200</td><td>2300</td>
</tr>
<tfoot>
<tr>
<th>Total</th><th>5900</th><th>7900</th>
</tr> 
</tfoot>
</tbody>
</table>
</html>

Display in Browser:

css table tbody and tfoot

 

Example: CSS caption-side property

HTML Code:

<html>
<body>
<style>
table{caption-side: bottom;}
table,td, th {border: 1px solid blue; text-align: center;}
body{font-family:Verdana;}
</style>
<table border="2" width="50%">
<caption>Table-1: Price List </caption>
<tr><td>Type</td><td>Manufacturer</td><td>Price</td></tr>
<tr><td>Laptop</td><td>Dell</td><td>$800</td></tr>
<tr><td>Laptop</td><td>Toshiba</td><td>$700</td></tr>
<tr><td>Laptop</td><td>HP</td><td>$750</td></tr>
</table>
</body>
</html>

Display in Browser:

css caption-side property

 

Individual group columns and to target both:

You can use the span attribute on the col elements for grouping columns and also the col element can be used individually to target individual columns.

In the above example, just change the style tags with the following codes. As a result, you will see output like the following:

HTML Code:

<html>
<head>
<style>
body{font-family:verdana;}
.group{background-color:orange;}
</style>
</head>
<table width=50%>
<caption>Yuvraj Singh</caption>
<colgroup>
<col/>
<col class="group"/><col/>
<col class="group"/><col/>
<col class="group"/><col/>
<col class="group"/>
</colgroup>
<tr>
<th>&nbsp;</th><th>Mat</th><th>Inns</th><th>Runs</th><th>HS</th><th>Ave</th><th>100</th><th>50</th>
</tr>

<tr>
<th>Tests</th>
<td>37</td><td>57</td><td>1775</td><td>169</td><td>34.80</td><td>3</td><td>10</td>
</tr>

<tr>
<th>ODIs</th>
<td>274</td><td>252</td><td>8051</td><td>139</td><td>37.62</td><td>13</td><td>49</td>
</tr>

<tr>
<th>T20Is</th>
<td>29</td><td>27</td><td>667</td><td>70</td><td>30.31</td><td>0</td><td>5</td>
</tr>
</table>
</html>

Display in Browser:

css table Individual group columns and to target both

Use of column group and col element:

In the above example, just change the code below. As a result, you will see output like the following:

In the above example, just change the code below. As a result, you will see output like the following:

HTML Code:

<html>
<head>
<style>
body{font-family:verdana;}
.group{background-color:orange;}
</style>
</head>
<table width=50%>
<caption>Yuvraj Singh</caption>
<colgroup span="4" class="group">
<tr>
<th>&nbsp;</th><th>Mat</th><th>Inns</th><th>Runs</th><th>HS</th><th>Ave</th><th>100</th><th>50</th>
</tr>

<tr>
<th>Tests</th>
<td>37</td><td>57</td><td>1775</td><td>169</td><td>34.80</td><td>3</td><td>10</td>
</tr>

<tr>
<th>ODIs</th>
<td>274</td><td>252</td><td>8051</td><td>139</td><td>37.62</td><td>13</td><td>49</td>
</tr>

<tr>
<th>T20Is</th>
<td>29</td><td>27</td><td>667</td><td>70</td><td>30.31</td><td>0</td><td>5</td>
</tr>
</table>
</html>

Display in Browser:

css collar gruop and col table

Example: Design the table with background:

HTML Code:

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

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

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

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

<h2>Table background design</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Ganesh</td>
    <td>Karmakar</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Poresh</td>
    <td>Biswas</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Dinesh</td>
    <td>Dash</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>Gopal</td>
    <td>Nagh</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Display in Browser:

css table background design

CSS table background-image property:

Using this property image can be added in the table. It accepts the URL as the value through which the image is displayed.

Syntax :

table{background-image: url(image/back.gif);}

Note:
To practice the example given below, first take a picture of your choice and save it in a. JPG, .Ping, .GIF format on your hard drive. Then open the Notepad by typing the following code into the same folder with.Html extension. If you open the save file, you will see the desired output.

Example:

HTML Code:

<html>
<head>
<style type="text/css">
body{font-family: verdana;}
table, th, td {border: 2px #2b2b2b solid; color: #6d4b39;}
table {background-color: #6d4b39;
background-image:url(background.png);}
</style>
</head>
<body>
<table width="50%">
<tr><td>Type</td><td>Manufactur</td><td>Price</td>
<tr><td>Laptop</td><td>Toshiba</td><td>$750</td>
<tr><td>Laptop</td><td>Dell</td><td>$700</td>
<tr><td>Laptop</td><td>HP</td><td>$800</td>

Display in Browser:

css table backgroun-image property

 

Leave a Reply

Your email address will not be published. Required fields are marked *