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 sample caption Heading 1 Heading 2 Row 1 Value 1 Row 1 Value 2 Row 2 Value 1 Row 2 Value 2	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 Vegetables Quantity Price Carrot 1 Kg Rs. 20/- Beetroot Rs. 10/- Onion 500 gms 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

Contributors and Content Editors

Nancyvarkey, Pravin1389