Difference between revisions of "HTML/C2/Tables-in-HTML/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 37: Line 37:
 
|-
 
|-
 
|| Slide 4: System Requirements  
 
|| Slide 4: System Requirements  
−
|| To record this tutorial, I’m using * '''Ubuntu Linux 16.04 OS'''
+
|| To record this tutorial, I’m using  
 +
* '''Ubuntu Linux 16.04 OS'''
 
* '''HTML5'''
 
* '''HTML5'''
 
* '''gedit Text Editor '''and
 
* '''gedit Text Editor '''and
Line 239: Line 240:
 
|| Point to the rows and columns on the browser
 
|| 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'''.
 
|| 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.
 
  
 
|-
 
|-

Latest revision as of 11:36, 15 June 2018

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.
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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C2/Tables-in-HTML/English&oldid=43464"