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:
| ||||||||||||
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
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
|
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:
| ||||||||||||
Slide 6:
Table Attributes |
| ||||||||||||
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. | ||||||||||||
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 |
| ||||||||||||
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
| ||||||||||||
Slide 9: Assignment | As an assignment-
| ||||||||||||
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 |