View source for HTML/C2/Tables-in-HTML/English

'''Title of the script:''' Tables in HTML

'''Author:''' Praveen S

'''Domain Reviewer:''' M.Deivamani

'''Novice Reviewer: '''Madhulika G

'''Keywords:''' HTML, Tables, Tables in HTML, Table Attributes, Borders, Cell Spacing, Cell Padding, Table Width, Row Span, Column Span, Spoken Tutorial, Video Tutorial.



{|

|-
|| Visual Cue
|| Narration

|-
|| Slide 1: Title
|| Hello and welcome to the spoken tutorial on '''Tables''' in '''HTML'''

|-
|| Slide 2: 
Learning Objectives
|| In this tutorial we will learn:

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

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

If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.

|-
|| Slide 4: System Requirements 
|| To record this tutorial, I’m using * '''Ubuntu Linux 16.04 OS'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.

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

Please download and extract them.

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

|-
|| Gedit: Sample Table

<table>

<caption> sample caption</caption>

<tr> <th>Heading 1</th> <th>Heading 2</th>

</tr><tr> <td>Row 1 Value 1</td>

<td>Row 1 Value 2</td></tr><tr> <td>Row 2 Value 1</td> 

<td>Row 2 Value 2</td> 

</tr>

</table> 
|| Look at this example of writing code in '''HTML '''to create a '''table'''.

Do you notice the different '''tags''' used here?

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

|-
|| Point to the <table> … </table>
|| Note the positions of the '''table''' start and end '''tags'''.

The content to be formatted as a '''table,''' should be written within these '''tags'''.

|-
|| Point to <caption> sample caption</caption>
|| Look at the '''caption''' '''tag'''. 

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

Observe that the '''caption''' has to be declared immediately after the '''table '''start '''tag.'''

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

|-
|| Point to the both the <tr> sections
|| The content of the '''table '''is formatted into '''rows'''.

Observe that we have used the '''tr tag''' to create a new row in the '''table'''.

'''tr''' stands for '''table row'''.

|-
|| Point to 

<th>Heading 1</th> <th>Heading 2</th>
|| Here, we have used the '''th tag''' to declare the '''column headings.'''

'''th''' stands for '''table heading'''.

'''th '''is also not a mandatory '''tag'''.

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

|-
|| Point to 

<td>Row 1 Value 1</td>

<td>Row 1 Value 2</td>
|| Look at the '''td tags''' here. They are used to declare the value within each cell of the '''table'''.

'''td''' stands for '''table definition'''.

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

|-
|| Open '''MyFirstPage.html '''in''' Gedit'''
|| Let us open our file '''MyFirstPage.html. '''

I have already opened the '''html''' file in my editor and here is our code.

This file is also available in the '''Code Files''' link on this tutorial page.

Here, we will see how to format the content with the help of '''table'''.

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

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

|-
|| Press Ctrl + S keys
|| Save the code.

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

|-
|| Right-click on the file >> Open with web browser
|| Right-click on it and open with any web browser.

|-
|| Highlight the displayed content
|| Here is the output. 

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

|-
|| Point to to the caption
|| Here is the '''caption'''.

|-
|| Point to the headings
|| These are the '''headings.'''

|-
|| Point to the rows 
|| The individual '''rows '''and their values.

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

|-
|| Slide 6:
Table Attributes
|| We can make it look better with the help of the following '''attributes''' and '''styles''':

* '''Border'''
* '''Width'''
* '''Spacing''' and '''Padding''' 
* '''Rowspan''' and '''Columnspan'''

|-
|| Slide 6:
Table Attributes
|| * The '''Rowspan''' and '''Columnspan''' are declared inside the '''td '''and''' th tag'''.
* The others are declared inside the '''table''' start '''tag''' or in a '''style''' '''tag''' or '''attribute'''. 

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

|-
|| Open mystyle.css in gedit
|| Open our file '''mystyle.css''' in text editor 

|-
|| Type:

table {

border: 1px Solid Blue;

}
|| Type the code as shown here

|-
|| Highlight 1px

Highlight Solid blue
|| Here '''1 pixel''' denotes the '''border''' thickness 

And '''Solid Blue''' denotes the color of the '''border'''.

|-
|| Press Ctrl+S keys
|| Save the file.

|-
|| Switch to the browser >> refresh
|| Switch to the browser and refresh the page.

|-
|| Point to the table border
|| We can see that the '''table''' now has an outer '''border'''.

|-
|| Point to the rows and columns on the browser
|| To put a '''border''' for the '''rows '''and '''columns''', we have to specify the '''border style '''for the '''td''' and '''th tags'''.

|-
|| Switch to gedit window
|| Let us switch to the editor window.

|-
|| Type in mystyle.css: 

''', th, tr, td '''
|| In '''mystyle.css''' file, next to '''table''' add 

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

This will set the border for each of the '''rows '''and '''columns '''in the '''table'''.

|-
|| type

'''table {width: 200px;}'''
|| Let us also set the width of the '''table''' using the '''width''' '''attribute'''.

So next to the '''border attribute''', type this code.

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

This will set the width of the '''table''' to '''200 pixels'''.

Note that the values can be in any units.

|-
|| Press Ctrl+S keys
|| Save the file.

|-
|| Switch to the browser >> refresh
|| Switch to the browser and refresh the page.

|-
|| Point to the borders
|| Observe the change.

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

|-
|| Point to the wrapped text
|| The width of the '''table''' is adjusted as per the value we gave, which is '''200 pixels'''.

Note that this makes the content wrap to the next line.

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

|-
|| Slide 7: 
Spacing and Padding
|| * The space between the '''cells''' is defined with the help of '''Border Spacing'''
* The space between the '''cell''' content and the '''cell border '''is defined with the help of '''Padding'''

|-
|| Switch to gedit window
|| Let us switch to the editor window.

|-
|| Type in mystyle.css: 

'''border-spacing: 5px;'''
|| In the '''mystyle.css''' file, next to width 

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

This will set the '''space''' between the '''borders '''as '''5 pixels'''.

|-
|| '''th, tr, td {'''

''' padding: 5px;'''

'''} '''
|| Then let us add the '''padding space '''for the '''cell''' contents and the '''borders'''.

After the '''border spacing''', type the following.

'''padding colon 5px semi-colon'''

This will set the '''padding''' space as '''5 pixels'''.

|-
|| Press Ctrl+S keys
|| Save the file.

|-
|| Switch to the browser >> refresh
|| Switch to the browser and refresh the page.

|-
|| 
|| Observe the change.

|-
|| Point to the table heading

Point to R1V1 and R2V1
|| What if we want to merge two '''cells''' of a '''row'''? 

Let’s say I want only one '''heading '''over here. 

And instead of two '''rows '''for the 1st '''column''', I need only one.

This can be done with the help of '''rowspan '''and '''columnspan attributes'''.

Let us try this.

|-
|| Switch to gedit.
|| Switch to the editor window.

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

|-
|| Table section >> delete the line for Heading 2 >> delete Row2 Value1
|| In the '''table section '''remove the line for '''Heading 2 '''

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

|-
|| 
|| I want the '''Heading 1''' to be spanned across the two cells, '''column'''-wise.

So inside the '''Heading 1’s th tag''', type

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

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

So inside the '''Row 1 Value 1’s td tag''', type

'''rowspan equal to within single quotes 2 '''

|-
|| Press Ctrl+S keys
|| Save the file.

|-
|| Switch to the browser >> refresh
|| Switch to the browser and refresh the page.

|-
|| 
|| Observe the change.

We got the output as expected.

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

Let us summarize.

|-
|| Slide 8: Summary 
|| In this tutorial, we have learnt how to create '''Tables '''in '''HTML.'''

We have also learnt to set the '''Table Attributes '''such as
* '''Border'''
* '''Width'''
* '''Spacing '''and''' padding'''
* '''Row Span '''and''' Column Span '''

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

* Open the file '''MyHomePage.html''' which you have created earlier.
* Create a '''table''' as shown below

{| style="border-spacing:0;width:8.44cm;"
|- style="border:1pt solid #000001;padding:0.176cm;"
| align=center| '''Vegetables'''
| align=center| '''Quantity'''
| align=center| '''Price'''
|- style="border:1pt solid #000001;padding:0.176cm;"
|| Carrot
| align=center| 1 Kg
| align=center| Rs. 20/-
|- style="border:1pt solid #000001;padding:0.176cm;"
|| Beetroot
| align=center| Rs. 10/-
|- style="border:1pt solid #000001;padding:0.176cm;"
|| Onion
| align=center| 500 gms
| align=center| Rs. 15/-
|-
|}

|-
|| Slide 10:
About Spoken Tutorial project
|| The video at the following link summarizes the Spoken Tutorial project. 

Please download and watch it.

|-
|| Slide 11: About Workshop
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

|-
|| Slide 12: Forum questions
|| Please post your timed queries in forum. 

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

More information on this mission is available at this link.

|-
|| Slide 14: Thanks
|| This is Praveen from IIT Bombay signing off.

Thank you for joining

|-
|}