Pravin1389 at 16:13, 13 November 2020

2020-11-13T16:13:40Z

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

2020-11-11T13:28:31Z

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

New page

'''Title of the script: '''Table 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 Border, CSS Table Width, CSS Table CSS Height, CSS Table Alignment, CSS Table Padding, CSS Table Color, CSS Table Caption

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the spoken tutorial on “'''Table in CSS'''”.
|-
| | Slide: Learning Objectives
| | In this tutorial, we will learn about:

* '''Table '''properties in''' CSS '''and
* Customising the width, height, padding, colour and alignment of '''cells''' in the '''table'''

|-
| | 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 style and format the '''tables'''.

|-
| | Slide: Table

{| style="width: 22em;"
|-
| '''Border''' || '''Width'''
|-
| '''Height || '''Alignment'''
|-
| '''Padding'''|| '''Color'''
|-
| '''Caption'''
|}
| | These are the '''CSS table '''properties.

Let us understand these through examples.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css'''
|-
| | Point to Mypage.html in my-css folder
| | For this demonstration, I’m using the file '''Mypage.html'''.

The same is available in the '''Code files''' link for practice
|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''
|-
| | Narration
| | First, we will add a '''table''' to our '''web page.'''
|-
| | [gedit - mystyle.css]

Type:

<pre>

<h2> Today’s Rate </h2>

<table>

<tr>

<th> Item </th>

<th> Price </th>

</tr>

<tr>

<td> Onion</td>

<td> 20 Rs/Kg </td>

</tr>

<tr>

<td> Potato </td>

<td> 15 Rs/kg </td>

</tr>

<tr>

<td> Tomato </td>

<td> 22 Rs/kg </td>

</tr>

<tr>

<td> Apple </td>

<td> 100 Rs/kg </td>

</tr>

<tr>

<td> Banana </td>

<td> 15 Rs/kg </td>

</tr>

<tr>

<td> Orange </td>

<td> 50 Rs/kg </td>

</tr>

<caption> Table 1 </caption>

</table>

</pre>
| | Inside the '''body tag''', next to the '''ol tag''', type the code as shown.

I have added a '''table''' with '''two columns'''
|-
| | 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.

A '''table '''with two''' columns '''and without any '''borders''' is added to the end of the page.
|-
| | Narration
| | Now let us apply some '''CSS''' properties to the '''table'''.
|-
| | Only narration
| | '''Border''' property is used to set and style the '''borders''' for the '''table.'''
|-
| | Switch to '''my-css '''folder
| | Switch to the '''my-css '''folder.
|-
| | Open mystyle.css
| | Now open the file '''mystyle.css''' in any''' text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | [gedit - mystyle.css]

Type:

table {border: 2px solid black;}
| | Now I will set a '''border''' for the''' table.'''

Next to the '''ul tag, '''type code as shown.

|-
| | [gedit - mystyle.css]

Highlight:

border: 2px solid black;
| | Here I have set the '''border width''' to '''2 pixels, border''' '''style''' to '''solid, '''and '''border color '''to''' black.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

We can see a '''border''' around the '''table.'''
|-
| | Only narration
| | But I want '''borders '''for the '''headings '''and '''standard''' '''cells '''as well.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

table, th, td {border: 2px solid black;}
| | Update the '''CSS''' '''table''' property as shown.

|-
| | [gedit - mystyle.css]

Highlight:

table, th, td
| | Using '''th''' and '''td''', we can set the '''border''' for '''heading''' and '''standard''' '''cells.'''

In this''' '''case I have set the common '''border''' style for all of these.

To set different properties for the individual elements, write them separately.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

Since I have set the '''border''' for the '''table''' and '''cells''', the resultant '''table''' has 2 '''borders'''.

To solve this, we will use '''border-collapse''' property.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

table {

border-collapse: collapse;}
| |

Next to the current '''table,th,td''' '''tag''' 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 '''table '''and''' '''the '''cells '''have a single''' border '''around them.
|-
| | Only narration
| | Using '''CSS''' we can set a fixed '''width '''and''' height '''for the '''table'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

width: 20%;
| | Now I will set the '''width''' of the '''table''' to '''20%.'''

Inside the '''table tag''', next to the '''border-collapse '''property, type the code as shown.
|-
| | [gedit - mystyle.css]

Type:

td {height: 40px;}
| | Next I will set the '''height '''of the '''standard''' '''cells''' to '''40 pixels.'''

Next to the '''table tag''', 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 '''width''' of the '''table''' is set to '''20%''' of the page width.

And the '''height''' of the '''standard cells''' is set to '''40 pixels.'''
|-
| | Slide:Alignment
| | Text inside the '''table '''can be aligned '''horizontally '''or''' vertically.'''
|-
| | Slide: Horizontal-Alignment
| | In''' horizontal alignment:'''* The text''' '''inside the '''table '''can be aligned either to the''' left, right, center '''or''' justify.'''

|-
| | Slide: Horizontal-Alignment

[Image = horizontal-left.png]
| | By default, the text of the '''standard cell '''is''' left-aligned.'''
|-
| | Slide: Horizontal-Alignment

[Image = horizontal-center.png]
| | The text of the '''heading '''is''' center-aligned.'''
|-
| | Slide: Vertical-Alignment
| | In''' vertical alignment:'''* The text''' '''inside the '''table '''can be aligned either to the''' top, bottom, '''or''' middle.'''

|-
| | Slide: Vertical-Alignment

[Image = vertical.png]
| | By default''', '''the text of the''' standard cell '''and '''heading '''is set to the '''middle.'''

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

text-align: center;

vertical-align: bottom;
| | Inside''' td tag, '''next to the''' height '''property, type the code as shown.
|-
| | [gedit - mystyle.css]

Highlight:

text-align: center;

vertical-align: bottom;
| | Here I have set the '''horizontal alignment '''of the text to '''center'''

And '''vertical alignment''' to '''bottom'''.
|-
| | 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 of the '''standard cell '''is '''horizontally aligned '''to the '''center.'''

And '''vertically aligned '''to the '''bottom.'''
|-
| | Slide: Padding

[Image = padding.png]
| |
* Apart from '''alignment''' property, '''padding '''property is used to set the position of the text
* '''Padding '''property controls the space between the '''border''' and '''text''' inside the '''table.'''

|-
| | Slide: Padding
| | We can customize the '''padding '''property in all the four directions: '''top, right, bottom '''&''' left.'''
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

th {padding: 20px 10px 10px 20px;}
| | Now I will set the '''padding''' space to '''20 pixels''' for '''top '''and '''left'''.

Then '''10''' '''pixels''' for '''right''' and '''bottom.'''

Next to the''' td tag, '''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.

'''Padding''' is added to the '''header''' '''cell''' in the '''table'''.
|-
| | Only Narration
| | Using '''CSS color '''property we can also set the color for the '''tables'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

color: blue;

background-color: lightblue;
| | Inside the '''th tag''', next to the''' padding '''property''', '''type the code as shown.
|-
| | [gedit - mystyle.css]

Highlight:

color: blue;

background-color:lightblue;
| | For the '''header''' '''cell''' , I have set the '''text''' '''color''' to '''blue '''and''' background''' '''color''' to '''light''' '''blue.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

'''Background''' and '''text color''' have been set for the header cell.
|-
| | Slide: Caption
| |
* Using '''CSS''', we can set the position of the '''caption '''for the '''table.'''
* '''Caption '''can be placed at the '''top '''or''' bottom '''of the''' table.'''
* By default, the position of the''' caption''' is set to '''top.'''

|-
| | [Firefox]

Point to the caption
| | Notice that in the output, we can see the '''caption '''placed at the '''top '''of the '''table'''.

Let’s change its position to '''bottom'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

caption {

caption-side: bottom;}
| | Next to the''' th tag, '''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 '''caption '''is placed at the '''bottom''' of the '''table'''.
|-
| | Only narration
| | We will learn about more '''styling''' options for '''tables''' in the upcoming tutorials.

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

Let us summarize.
|-
| | Slide: Summary
| | In this tutorial, we have learnt about:

* '''Table '''properties in''' CSS '''and
* Customising the width, height, padding, colour and alignment of '''cells''' in the '''table'''

|-
| | Slide: Assignment
| | As an assignment

* Open the file '''webpage.html''' which you have created earlier.
* Add a '''table''' with a''' caption'''

|-
| | Slide: Assignment
| |
* Open the file '''styles.css '''which you have created earlier.
* Set following properties for '''table''':
** '''Solid blue 4px''' '''border '''with''' border-collapse '''property
** '''Width '''to '''30%.'''
** '''Height '''of the '''heading '''to''' 30px'''.
** '''Background color '''of''' '''the''' heading '''to '''pink.'''
** '''Caption '''at the''' bottom.'''
* 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: Answers for THIS Spoken Tutorial
| | 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 15: / Line 15: @@
 |-
 |  | Slide: Title
-|  | Welcome to the spoken tutorial on “'''Table in CSS'''”.
+|  | Welcome to this spoken tutorial on “'''Table in CSS'''”.
 |-
 |  | Slide: Learning Objectives
@@ Line 332: / Line 332: @@
 |-
 |  | Slide: Horizontal-Alignment
-|  | In''' horizontal alignment:'''* The text''' '''inside the '''table '''can be aligned either to the''' left, right, center '''or''' justify.'''
+|  | In''' horizontal alignment:'''
 |-
@@ Line 346: / Line 348: @@
 |-
 |  | Slide: Vertical-Alignment
-|  | In''' vertical alignment:'''* The text''' '''inside the '''table '''can be aligned either to the''' top, bottom, '''or''' middle.'''
+|  | In''' vertical alignment:'''
 |-

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

Pravin1389 at 16:13, 13 November 2020

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