CSS/C3/Table-in-CSS/English

From Script | Spoken-Tutorial
Jump to: navigation, search

Title of the script: Table in CSS

Author: Neha Solanki

Domain Reviewer: Ankita Maske, Om Prakash Soni

Novice Reviewer: Madhuri Ganapathi

Keywords: CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Table, CSS Table Border, CSS Table Width, CSS Table CSS Height, CSS Table Alignment, CSS Table Padding, CSS Table Color, CSS Table Caption

Visual Cue Narration
Slide: Title Welcome to this spoken tutorial on “Table in CSS”.
Slide: Learning Objectives In this tutorial, we will learn about:
  • Table properties in CSS and
  • Customising the width, height, padding, colour and alignment of cells in the table
Slide:

System Requirements

This tutorial is recorded using,
  • Ubuntu Linux OS v 18.04
  • CSS3
  • HTML5
  • gedit Text Editor and
  • Firefox web browser

However you may use any other editor or browser of your choice.

Slide: Prerequisite

https://spoken-tutorial.org

To practise this tutorial, you should know to use HTML and CSS.

If not, please go through the HTML and CSS tutorials on this website.

Slide: Code Files The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

Make a copy and then use them while practising.

Slide: Table
  • Using CSS we can style and format the tables.
Slide: Table


Border Width
Height Alignment
Padding Color
Caption
These are the CSS table properties.

Let us understand these through examples.

Open my-css folder Go to the practice folder my-css
Point to Mypage.html in my-css folder For this demonstration, I’m using the file Mypage.html.

The same is available in the Code files link for practice

Open Mypage.html in gedit Open the file Mypage.html in the text editor.
Narration First, we will add a table to our web page.
[gedit - mystyle.css]

Type: 


<h2> Today’s Rate </h2>

<table>

<tr>

<th> Item </th>

<th> Price </th>

</tr>

<tr>

<td> Onion</td>

<td> 20 Rs/Kg </td>

</tr>

<tr>

<td> Potato </td>

<td> 15 Rs/kg </td>

</tr>

<tr>

<td> Tomato </td>

<td> 22 Rs/kg </td>

</tr>

<tr>

<td> Apple </td>

<td> 100 Rs/kg </td>

</tr>

<tr>

<td> Banana </td>

<td> 15 Rs/kg </td>

</tr>

<tr>

<td> Orange </td>

<td> 50 Rs/kg </td>

</tr>

<caption> Table 1 </caption>

</table>
Inside the body tag, next to the ol tag, type the code as shown.

I have added a table with two columns

Press Ctrl + S Save the file.
Open Mypage.html in firefox Switch to the my-css folder.

Now open the file Mypage.html in a web browser.

[Firefox]

Highlight the output

Observe the output.

A table with two columns and without any borders is added to the end of the page.

Narration Now let us apply some CSS properties to the table.
Only narration Border property is used to set and style the borders for the table.
Switch to my-css folder Switch to the my-css folder.
Open mystyle.css Now open the file mystyle.css in any text editor.

I have opened it in the gedit Text Editor.

[gedit - mystyle.css]

Type:

table {border: 2px solid black;}

Now I will set a border for the table.

Next to the ul tag, type code as shown.

[gedit - mystyle.css]

Highlight:

border: 2px solid black;

Here I have set the border width to 2 pixels, border style to solid, and border color to black.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

We can see a border around the table.

Only narration But I want borders for the headings and standard cells as well.
Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css]

Update:

table, th, td {border: 2px solid black;}

Update the CSS table property as shown.
[gedit - mystyle.css]

Highlight:

table, th, td

Using th and td, we can set the border for heading and standard cells.

In this case I have set the common border style for all of these.

To set different properties for the individual elements, write them separately.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Since I have set the border for the table and cells, the resultant table has 2 borders.

To solve this, we will use border-collapse property.

Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css]

Type:

table {

border-collapse: collapse;}

Next to the current table,th,td tag type the code as shown.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Now the table and the cells have a single border around them.

Only narration Using CSS we can set a fixed width and height for the table.
Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css]

Type:

width: 20%;

Now I will set the width of the table to 20%.

Inside the table tag, next to the border-collapse property, type the code as shown.

[gedit - mystyle.css]

Type:

td {height: 40px;}

Next I will set the height of the standard cells to 40 pixels.

Next to the table tag, type the code as shown.

Press Ctrl + S Save the file
Switch to firefox Switch to the browser and refresh the page
[Firefox]

Highlight the output

Observe the output.

Now the width of the table is set to 20% of the page width.

And the height of the standard cells is set to 40 pixels.

Slide:Alignment Text inside the table can be aligned horizontally or vertically.
Slide: Horizontal-Alignment In horizontal alignment:
  • The text inside the table can be aligned either to the left, right, center or justify.
Slide: Horizontal-Alignment

[Image = horizontal-left.png]

By default, the text of the standard cell is left-aligned.
Slide: Horizontal-Alignment

[Image = horizontal-center.png]

The text of the heading is center-aligned.
Slide: Vertical-Alignment In vertical alignment:
  • The text inside the table can be aligned either to the top, bottom, or middle.
Slide: Vertical-Alignment

[Image = vertical.png]

By default, the text of the standard cell and heading is set to the middle.

Let us try these.

Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css]

Type:

text-align: center;

vertical-align: bottom;

Inside td tag, next to the height property, type the code as shown.
[gedit - mystyle.css]

Highlight:

text-align: center;

vertical-align: bottom;

Here I have set the horizontal alignment of the text to center

And vertical alignment to bottom.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]


Highlight the output

Observe the output.

Now the text of the standard cell is horizontally aligned to the center.

And vertically aligned to the bottom.

Slide: Padding

[Image = padding.png]

  • Apart from alignment property, padding property is used to set the position of the text
  • Padding property controls the space between the border and text inside the table.
Slide: Padding We can customize the padding property in all the four directions: top, right, bottom & left.
Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css]

Type:

th {padding: 20px 10px 10px 20px;}

Now I will set the padding space to 20 pixels for top and left.

Then 10 pixels for right and bottom.

Next to the td tag, type the code as shown.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Padding is added to the header cell in the table.

Only Narration Using CSS color property we can also set the color for the tables.
Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css]

Type:

color: blue;

background-color: lightblue;

Inside the th tag, next to the padding property, type the code as shown.
[gedit - mystyle.css]

Highlight:

color: blue;

background-color:lightblue;

For the header cell , I have set the text color to blue and background color to light blue.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Background and text color have been set for the header cell.

Slide: Caption
  • Using CSS, we can set the position of the caption for the table.
  • Caption can be placed at the top or bottom of the table.
  • By default, the position of the caption is set to top.
[Firefox]

Point to the caption

Notice that in the output, we can see the caption placed at the top of the table.

Let’s change its position to bottom.

Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css]

Type:

caption {

caption-side: bottom;}

Next to the th tag, type the code as shown.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.


Now the caption is placed at the bottom of the table.

Only narration We will learn about more styling options for tables in the upcoming tutorials.

With this we have come to the end of this tutorial.

Let us summarize.

Slide: Summary In this tutorial, we have learnt about:
  • Table properties in CSS and
  • Customising the width, height, padding, colour and alignment of cells in the table
Slide: Assignment As an assignment
  • Open the file webpage.html which you have created earlier.
  • Add a table with a caption
Slide: Assignment
  • Open the file styles.css which you have created earlier.
  • Set following properties for table:
    • Solid blue 4px border with border-collapse property
    • Width to 30%.
    • Height of the heading to 30px.
    • Background color of the heading to pink.
    • Caption at the bottom.
  • Link the styles.css file to webpage.html file
  • Observe the output.
Slide:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial Workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Answers for THIS Spoken Tutorial Please post your timed queries on this forum.
Slide: Acknowledgement Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
Slide: Thanks This is Neha Solanki from IIT Bombay.

Thank you for watching.

Contributors and Content Editors

Nehasolanki, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C3/Table-in-CSS/English&oldid=54405"