HTML/C2/Tables-in-HTML/English-timed
From Script | Spoken-Tutorial
| 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 |
