Nancyvarkey at 09:45, 18 November 2020

2020-11-18T09:45:28Z

Pravin1389 at 16:59, 13 November 2020

2020-11-13T16:59:38Z

Nehasolanki: Created page with "'''Title of the script: '''Advanced Table Design in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganap..."

2020-11-11T13:55:56Z

Created page with "'''Title of the script: '''Advanced Table Design in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganap..."

New page

'''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

{| border="1"
|-
| | '''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 cyan '''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.

Let us try this.
|-
| | 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:

<nowiki><div class="responsive-table"></nowiki>

<nowiki></div></nowiki>

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

@@ Line 271: / Line 271: @@
 td:nth-child(1){background-color: lightpink;}
-|  | I will set the''' background color '''to''' light cyan '''for the first '''column'''.
+|  | I will set the''' background color '''to''' light pink '''for the first '''column'''.
 Next to the '''th, td tag, '''type the code as shown.
@@ Line 285: / Line 285: @@
 This will set the '''CSS''' property for that specific '''column'''.
-Here, I have set it to value 1 to style the first column.
+Here, I have set it to value 1 to '''style''' the first '''column'''.
 |-
 |  | Press Ctrl + S
@@ Line 298: / Line 298: @@
 |  | Observe the output.
-Now the '''background''' '''color''' of the first '''column '''is set''' '''to''' light pink.'''
+Now the '''background''' '''color''' of the first '''column '''is set to''' light pink.'''
 |-
 |  | Slide: Layout
@@ Line 393: / Line 393: @@
 Highlight table
-|  | In this '''html '''file I have created a '''table''' and linked it to''' tablestyle.css '''stylesheet.
+|  | In this '''html '''file I have created a '''table''' and linked it to''' tablestyle.css stylesheet'''.
 |-
 |  | Switch to '''my-css '''folder
@@ Line 417: / Line 417: @@
 |  | I have already set the '''background color''' for this page to''' light pink.'''
-And''' '''some '''border''' properties for the table.
+And some '''border''' properties for the '''table'''.
 |-
 |  | Open table.html in firefox
@@ Line 480: / Line 480: @@
 |  | Observe the output.
-A '''horizontal scroll bar''' is added only to the table to see the full content.
+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.
+|  | 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.
@@ Line 501: / Line 501: @@
 * Open the file '''styles.css '''which you have created earlier.
-* Set the '''Zebra style '''for the '''table '''with '''lightcyan color '''for the '''even '''rows.
+* 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.

@@ Line 312: / Line 312: @@
 * '''fixed''': '''width''' is fixed and it does not change automatically to fit the text.
 |-
 |  | Narration

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

Nancyvarkey at 09:45, 18 November 2020

Pravin1389 at 16:59, 13 November 2020

Nehasolanki: Created page with "'''Title of the script: '''Advanced Table Design in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganap..."