CSS/C3/Advanced-Table-Design-in-CSS/English

From Script | Spoken-Tutorial
Jump to: navigation, search

Title of the script: Advanced Table Design in CSS

Author: Neha Solanki

Domain Reviewer: Ankita Maske, Om Prakash Soni

Novice Reviewer: Madhuri Ganapathi

Keywords: CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Table, CSS Table Decoration, CSS Table Horizontal Border Divider, CSS Table Hover Color, Table Zebra Stripes, CSS Table Column Decoration, CSS Table Image, CSS Table Layout, CSS Table Responsive

Visual Cue Narration
Slide: Title Welcome to the spoken tutorial on “Advanced Table Design in CSS”
Slide: Learning Objectives In this tutorial, we will learn about:
  • Some advanced Table designs in CSS
Slide:

System Requirements

This tutorial is recorded using,
  • 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.

Slide: Prerequisite

https://spoken-tutorial.org

To practise this tutorial, you should know to use HTML and CSS.

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

Slide: Code Files The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

Make a copy and then use them while practising.

Slide: Table
  • Using CSS we can design tables in many ways.
Slide: Table

Horizontal Border Divider

Hover Color

Zebra Stripes

Column Decoration

Setting Background Image

Table Layout

Responsive Table

These are the different ways to design tables.

Let us understand these through examples.

Only narration Border property is used to set and style the borders for the table.
Open my-css folder Go to the practice folder my-css
Point to mystyle.css in my-css folder For this demonstration, I’m using the file mystyle.css.

The same is available in the Code files link for practice

Open mystyle.css Now open the file mystyle.css, in any text editor.

I have opened it in the gedit Text Editor.

Only narration First, I will remove the previously set border style for the table.
[gedit - mystyle.css] Delete:

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

Delete the code as shown.
[gedit - mystyle.css] Type:

th, td {

border-bottom: 2px solid black;}

Now I will set a border divider for the heading and standard cell.


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

[gedit - mystyle.css] Highlight:

border-bottom: 2px solid black;

We have used border-bottom property.

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

Press Ctrl + S Save the file.
Open Mypage.html in firefox Switch to the my-css folder.

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

[Firefox]

Highlight the output

Observe the output.

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

Only narration Let’s decorate the table some more.

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

Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css] Type:

tr:hover {background-color: ivory;}

Whenever the user hovers the mouse over any row, background color will be set to ivory.

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

[gedit - mystyle.css] Highlight:

tr:hover {background-color:ivory;}

I have defined the hover selector for table row to set the background color.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Now move the mouse over any row of the table.

Background color of the row changes to ivory.

Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css] Delete:

tr:hover {background-color: ivory;}

Ctrl+S

For the next designing style, delete this code and save the file.
Only narration Now I will decorate the table by setting an image as a background for the table.
[gedit - mystyle.css] Type:

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

Inside the table tag, next to the width property, type the code as shown.
[gedit - mystyle.css] Highlight:

design.png

This image is available in the Code Files link on this tutorial page.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Now a new background image is set for the table.

Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css] Delete:

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

Ctrl+S

Once again for the next designing style, delete this code and save the file.
Narration Now I will decorate the table with zebra stripes to make it more attractive.
[gedit - mystyle.css] Type:

tr:nth-child(odd){

background-color: lightcyan;}

I will set the background color to light cyan for every odd row.

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

[gedit - mystyle.css] Highlight

tr:nth-child(odd)

By defining the selector for table rows like this, it sets the CSS property for that specific row.

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

For even rows, enter the value as even.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

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

Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css] Delete:

tr:nth-child(odd)

{background-color: lightcyan;}

Ctrl+S

For the next designing style, delete this code

and save the file.

Narration Now I will decorate the table, column-wise.
[gedit - mystyle.css] Type:

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

I will set the background color to light pink for the first column.

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

[gedit - mystyle.css]

Highlight

td:nth-child(1)

Here we have defined the selector for table data.

This will set the CSS property for that specific column.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

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

Slide: Layout
  • Tables can expand and contract according to the text in the table.
  • Layout property controls the expansion and contraction of the tables.
Slide: Layout Values Values of this property are:
  • 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.
Narration First, let us make some changes to the text of the table.
Open Mypage.html in firefox Switch to the my-css folder.

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

[gedit - Mypage.html] Update:

<td> GreenApple & YellowApple </td>

Inside the table tag, in the fifth row and first column, update the code as shown.
Press Ctrl + S Save the file
Switch to firefox Switch to the browser and refresh the page
[Firefox]

Highlight the output

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

Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css] Type:

table-layout: fixed;

Now I will set the layout to fixed.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

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

Here the table width is fixed.

Only narration Let’s understand how to create a responsive table.
Slide: Responsive
  • 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.
Switch to my-css folder Switch to the my-css folder.
Only narration To understand this property I have created a table.html web page

And tablestyle.css stylesheet.

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

Please download and save it.

Open table.html in gedit Open the file table.html in the text editor.
[gedit - table.html]

Highlight table

In this html file I have created a table and linked it to tablestyle.css stylesheet.
Switch to my-css folder Switch to the my-css folder.
Open tablestyle.css in gedit Now open the file tablestyle.css, in any text editor.

I have opened it in the gedit Text Editor.

[gedit - tablestyle.css] Highlight:

body{background-color: lightpink;}


table,th,td {

border: 2px solid black;

border-collapse: collapse;

}

I have already set the background color for this page to light pink.

And some border properties for the table.

Open table.html in firefox Switch to the my-css folder.

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

[browser]

Highlight the output

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

Switch to tablestyle.css Switch to the tablestyle.css file.
[gedit - tablestyle.css] Type:

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

Here I will define a class responsive-table.

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

[gedit - tablestyle.css] Highlight:

overflow-x: auto;

This property adds a scroll bar automatically if the content overflows at the left or right edges.
Press Ctrl + S Save the file.
Switch to table.html in gedit Switch to the table.html file.
[gedit - table.html] Type:

<div class="responsive-table">

</div>


I will wrap the table inside the div tag with class responsive-table.

Type the code as shown.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

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

Only narration These are some of the ways in which we can make the table attractive and responsive.

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

Let us summarize.

Slide: Summary In this tutorial, we have learnt about:
  • Some advanced Table designs in CSS
Slide: Assignment As an assignment
  • 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.
Slide:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial Workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Forum Please post your timed queries on this forum.
Slide: Acknowledgement Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
Slide: Thanks This is Neha Solanki from IIT Bombay.

Thank you for watching.

Contributors and Content Editors

Nancyvarkey, Nehasolanki, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C3/Advanced-Table-Design-in-CSS/English&oldid=54435"