Difference between revisions of "CSS/C3/Advanced-Table-Design-in-CSS/English"

• Some advanced Table designs in CSS

System Requirements

• Ubuntu Linux OS v 18.04
• CSS3
• HTML5
• gedit Text Editor and
• Firefox web browser

However you may use any other editor or browser of your choice.

https://spoken-tutorial.org

If not, please go through the HTML and CSS tutorials on this website.

Please download and extract them.

Make a copy and then use them while practising.

• Using CSS we can design tables in many ways.

Horizontal Border Divider

Hover Color

Zebra Stripes

Column Decoration

Setting Background Image

Table Layout

Responsive Table

Let us understand these through examples.

The same is available in the Code files link for practice

I have opened it in the gedit Text Editor.

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

th, td {

border-bottom: 2px solid black;}

Next to the caption tag, type the code as shown.

border-bottom: 2px solid black;

It sets the horizontal border divider with size 2 pixels, style solid and color black.

Now open the file Mypage.html in a web browser.

Highlight the output

We see horizontal border dividers are added after the heading and each standard cell.

Let’s set the background color of a row to a particular color on hovering the mouse.

tr:hover {background-color: ivory;}

Next to the th,td tag, type the code as shown.

tr:hover {background-color:ivory;}

Highlight the output

Now move the mouse over any row of the table.

Background color of the row changes to ivory.

tr:hover {background-color: ivory;}

Ctrl+S

background-image:url("design.png");

design.png

Please download and keep it in the same folder where you have saved your code files.

Highlight the output

Now a new background image is set for the table.

background-image:url("design.png");

Ctrl+S

tr:nth-child(odd){

background-color: lightcyan;}

Next to the th, td tag type the code as shown.

tr:nth-child(odd)

If you need to style the odd rows, enter the value as odd.

For even rows, enter the value as even.

Highlight the output

Now the background color of the odd rows are set to light cyan.

tr:nth-child(odd)

{background-color: lightcyan;}

Ctrl+S

For the next designing style, delete this code

and save the file.

td:nth-child(1){background-color: lightpink;}

Next to the th, td tag, type the code as shown.

Highlight

td:nth-child(1)

This will set the CSS property for that specific column.

Here, I have set it to value 1 to style the first column.

Highlight the output

Now the background color of the first column is set to light pink.

• Tables can expand and contract according to the text in the table.
• Layout property controls the expansion and contraction of the tables.

• auto(default): column width is set automatically to fit the text.
• fixed: width is fixed and it does not change automatically to fit the text.

Now open the file Mypage.html in the text editor.

<td> GreenApple & YellowApple </td>

Highlight the output

Width of the first column has increased to adjust the text.

As we haven’t set the layout property, the default auto value is considered.

table-layout: fixed;

Inside the table tag, next to width property, type the code as shown.

Highlight the output

Now the text is not affecting the total width of the table.

Here the table width is fixed.

• Responsive property helps to display the tables smoothly on any screen size.
• It enables horizontal scroll bars to display full content of the table if required.

And tablestyle.css stylesheet.

The same are available in the Code files link for practice.

Please download and save it.

Highlight table

I have opened it in the gedit Text Editor.

body{background-color: lightpink;}

table,th,td {

border: 2px solid black;

border-collapse: collapse;

}

And some border properties for the table.

Now open the file table.html in a web browser.

Highlight the output

The displayed table is very wide in size.

So we have to use the horizontal scroll bar of the browser to see the full content.

When we scroll to see the table’s content, the entire page gets scrolled.

To avoid this, we will add the responsive property for the table.

.responsive-table{overflow-x: auto;}

Next to the table,th,td tag, type the code as shown.

overflow-x: auto;

<div class="responsive-table">

</div>

Type the code as shown.

Highlight the output

A horizontal scroll bar is added only to the table to see the full content.

If we scroll, we observe that only the table is getting scrolled and not the entire page.

With this we have come to the end of this tutorial.

Let us summarize.

• Some advanced Table designs in CSS

• Open the file styles.css which you have created earlier.
• Set the Zebra style for the table with lightcyan color for the even rows.
• Link the styles.css file to webpage.html file.
• Observe the output.

About Spoken Tutorial project

Please download and watch it.

For more details, please write to us.

Thank you for watching.