PoojaMoolya: Created page with "{| border=1 |- || Time || Narration |- || 00:01 || Hello and welcome to the spoken tutorial on '''Tables''' in '''HTML''' |- || 00:07 || In this tutorial we will learn: Ho..."

2020-03-20T09:51:36Z

Created page with "{| border=1 |- || Time || Narration |- || 00:01 || Hello and welcome to the spoken tutorial on '''Tables''' in '''HTML''' |- || 00:07 || In this tutorial we will learn: Ho..."

New page

{| border=1

|-
|| Time
|| Narration

|-
|| 00:01
|| Hello and welcome to the spoken tutorial on '''Tables''' in '''HTML'''

|-
|| 00:07
|| In this tutorial we will learn:

How to create '''Tables '''in '''HTML''' and about the '''Table Attributes'''

|-
|| 00:16
|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''text editor''' and '''web browser'''.

|-
|| 00:24
||If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.

|-
|| 00:32
|| To record this tutorial, I’m using

'''Ubuntu Linux 16.04 OS'''

|-
|| 00:39
|| '''HTML5'''

'''gedit Text Editor '''and '''Firefox web browser'''

|-
|| 00:46
||However you may use any other '''editor''' or '''browser''' of your choice.

|-
||00:52
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.

|-
|| 00:59
||Please download and extract them.

|-
|| 01:02
|| '''Tables '''are used to format the content to be displayed on the web, in the form of '''Rows '''and '''Columns'''

|-
|| 01:10
|| Look at this example of writing code in '''HTML '''to create a '''table'''.

|-
|| 01:16
||Do you notice the different '''tags''' used here?

Let me elaborate a bit about these '''tags'''.

|-
|| 01:23
|| Note the positions of the '''table''' start and end '''tags'''.

|-
|| 01:28
||The content to be formatted as a '''table,''' should be written within these '''tags'''.

|-
|| 01:34
|| Look at the '''caption''' '''tag'''.

This helps us to declare the title of the '''table'''.

|-
|| 01:40
||Observe that the '''caption''' has to be declared immediately after the '''table '''start '''tag.'''

'''Caption''' '''tag''' is not always mandatory.

|-
|| 01:50
|| The content of the '''table '''is formatted into '''rows'''.

|-
|| 01:54
||Observe that we have used the '''tr tag''' to create a new row in the '''table'''.

|-
|| 02:00
||'''tr''' stands for '''table row'''.

|-
||02:04
|| Here, we have used the '''th tag''' to declare the '''column headings.'''

|-
|| 02:10
||'''th''' stands for '''table heading'''.

|-
|| 02:13
||'''th '''is also not a mandatory '''tag'''.

|-
|| 02:17
||We can use the '''th tag''' instead of the '''td tag''' in the first row, when we want '''column headings.'''

|-
|| 02:26
|| Look at the '''td tags''' here. They are used to declare the value within each cell of the '''table'''.

|-
|| 02:32
||'''td''' stands for '''table definition'''.

|-
|| 02:36
|| This code will create a '''table '''with 2 '''rows '''and 2 '''columns'''.

|-
|| 02:41
|| Let us open our file '''MyFirstPage.html. '''

|-
|| 02:45
||I have already opened the '''html''' file in my editor and here is our code.

|-
|| 02:51
||This file is also available in the '''Code Files''' link on this tutorial page.

|-
|| 02:57
||Here, we will see how to format the content with the help of '''table'''.

|-
|| 03:02
|| Pause the tutorial here for a while and do the following.

|-
|| 03:06
|| Below the''' definition list''', type the sample '''table '''code, as shown here.

|-
|| 03:12
|| Save the code.

|-
|| 03:15
|| Switch to the folder where we have saved the code.

|-
|| 03:19
|| Right-click on it and open with any web browser.

|-
|| 03:23
|| Here is the output.

We can see that our '''table '''is displayed.

|-
|| 03:30
|| Here is the '''caption'''.

|-
|| 03:33
|| These are the '''headings.'''

|-
|| 03:36
|| The individual '''rows '''and their values.

|-
|| 03:40
|| Though the content is displayed in rows and columns, it not appearing as a '''table'''.

|-
|| 03:47
|| We can make it look better with the help of the following '''attributes''' and '''styles''':

|-
|| 03:53
|| '''Border''', '''Width''', '''Spacing''' and '''Padding''' , '''Rowspan''' and '''Columnspan'''

|-
|| 04:01
|| The '''Rowspan''' and '''Columnspan''' are declared inside the '''td '''and''' th tag'''.

|-
|| 04:07
|| The others are declared inside the '''table''' start '''tag''' or in a '''style''' '''tag''' or '''attribute'''.

|-
|| 04:14
|| Let us look at them one by one with the help of examples.

|-
|| 04:19
|| Open our file '''mystyle.css''' in text editor

|-
|| 04:25
|| Type the code as shown here

|-
|| 04:29
|| Here '''1 pixel''' denotes the '''border''' thickness

|-
|| 04:33
||And '''Solid Blue''' denotes the color of the '''border'''.

|-
|| 04:37
|| Save the file.

|-
|| 04:39
|| Switch to the browser and refresh the page.

|-
|| 04:43
|| We can see that the '''table''' now has an outer '''border'''.

|-
|| 04:48
|| To put a '''border''' for the '''rows '''and '''columns''', we have to specify the '''border style '''for the '''td''' and '''th tags'''.

|-
|| 04:56
|| In '''mystyle.css''' file, next to '''table''' add

'''comma space th comma tr comma td'''

|-
|| 05:08
||This will set the border for each of the '''rows '''and '''columns '''in the '''table'''.

|-
|| 05:13
|| Let us also set the width of the '''table''' using the '''width''' '''attribute'''.

|-
|| 05:19
||So next to the '''border attribute''', type this code.

'''width colon 200 pixels semicolon.'''

|-
|| 05:27
||This will set the width of the '''table''' to '''200 pixels'''.

Note that the values can be in any units.

|-
|| 05:36
|| Save the file.

|-
|| 05:38
|| Switch to the browser and refresh the page.

|-
|| 05:42
|| Observe the change.

Now we have the '''borders '''for '''rows '''and '''columns '''too.

|-
|| 05:48
|| The width of the '''table''' is adjusted as per the value we gave, which is '''200 pixels'''.

|-
|| 05:55
||Note that this makes the content wrap to the next line.

|-
|| 06:00
|| Next, we will look at the other two '''table attributes '''which are '''spacing''' and '''padding'''.

|-
|| 06:06
|| The space between the '''cells''' is defined with the help of '''Border Spacing'''

|-
|| 06:12
|| The space between the '''cell''' content and the '''cell border '''is defined with the help of '''Padding'''

|-
|| 06:18
|| Let us switch to the editor window.

|-
|| 06:22
|| In the '''mystyle.css''' file, next to width

type '''border hyphen spacing colon 5pixel semi-colon'''

|-
|| 06:33
||This will set the '''space''' between the '''borders '''as '''5 pixels'''.

|-
|| 06:38
|| Then let us add the '''padding space '''for the '''cell''' contents and the '''borders'''.

|-
|| 06:44
||After the '''border spacing''', type the following.

'''padding colon 5pixels semi-colon'''

|-
|| 06:51
||This will set the '''padding''' space as '''5 pixels'''.

|-
|| 06:55
|| Save the file.

|-
|| 06:57
|| Switch to the browser and refresh the page.

|-
|| 07:01
|| Observe the change.

|-
|| 07:04
|| What if we want to merge two '''cells''' of a '''row'''?

|-
|| 07:08
||Let’s say I want only one '''heading '''over here.

|-
|| 07:12
||And instead of two '''rows '''for the 1st '''column''', I need only one.

|-
|| 07:16
||This can be done with the help of '''rowspan '''and '''columnspan attributes'''.

Let us try this.

|-
|| 07:24
|| Switch to the editor window.

Go to '''myfirstpage.html''' file

|-
|| 07:31
|| In the '''table section '''remove the line for '''Heading 2 '''

And then for the '''Row 2 Value 1''' line.

|-
|| 07:39
|| I want the '''Heading 1''' to be spanned across the two cells, columnwise.

|-
|| 07:45
||So inside the '''Heading 1’s th tag''', type

'''colspan equal to within single quotes 2 '''

|-
|| 07:53
|| Next I want the '''Row 1 Value 1''' to be spanned for 2 cells row wise.

|-
|| 08:00
||So inside the '''Row 1 Value 1’s td tag''', type '''rowspan equal to within single quotes 2 '''

|-
|| 08:08
|| Save the file.

|-
|| 08:11
|| Switch to the browser and refresh the page.

|-
|| 08:15
|| Observe the change.

We got the output as expected.

|-
|| 08:20
|| This brings us to the end of this tutorial.

Let us summarize.

|-
|| 08:25
|| In this tutorial, we have learnt how to create '''Tables '''in '''HTML.'''

|-
|| 08:30
||We have also learnt to set the '''Table Attributes '''such as

'''Border''', '''Width''', '''Spacing '''and''' padding''', '''Row Span '''and''' Column Span '''

|-
|| 08:40
|| As an assignment-

Open the file '''MyHomePage.html''' which you have created earlier.

|-
|| 08:47
|| Create a '''table''' as shown below

|-
|| 08:51
|| The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it.

|-
|| 08:59
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

|-
|| 09:09
|| Please post your timed queries in forum.

|-
|| 09:13
|| Spoken Tutorial Project is funded by MHRD, Government of India.

|-
|| 09:19
|| This is Praveen from IIT Bombay signing off.

Thank you for joining

|-
|}

HTML/C2/Tables-in-HTML/English-timed - Revision history

PoojaMoolya: Created page with "{| border=1 |- || Time || Narration |- || 00:01 || Hello and welcome to the spoken tutorial on '''Tables''' in '''HTML''' |- || 00:07 || In this tutorial we will learn: Ho..."