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

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

Contributors and Content Editors

PoojaMoolya