Difference between revisions of "CSS/C3/Advanced-Table-Design-in-CSS/English"
Nehasolanki (Talk | contribs) (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...") |
Pravin1389 (Talk | contribs) |
||
Line 312: | Line 312: | ||
* '''fixed''': '''width''' is fixed and it does not change automatically to fit the text. | * '''fixed''': '''width''' is fixed and it does not change automatically to fit the text. | ||
− | |||
|- | |- | ||
| | Narration | | | Narration |
Revision as of 22:29, 13 November 2020
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:
|
Slide:
System Requirements |
This tutorial is recorded using,
However you may use any other editor or browser of your choice. |
Slide: Prerequisite | 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 |
|
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.
|
[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 |
|
Slide: Layout Values | Values of this property are:
|
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 |
|
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;}
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:
|
Slide: Assignment | As an assignment
|
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. |