Difference between revisions of "CSS/C3/Table-in-CSS/English"

• Table properties in CSS and
• Customising the width, height, padding, colour and alignment of cells in the table

System Requirements

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

https://spoken-tutorial.org

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

Please download and extract them.

Make a copy and then use them while practising.

• Using CSS we can style and format the tables.

Let us understand these through examples.

The same is available in the Code files link for practice

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>

I have added a table with two columns

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

Highlight the output

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

I have opened it in the gedit Text Editor.

Type:

table {border: 2px solid black;}

Next to the ul tag, type code as shown.

Highlight:

border: 2px solid black;

Highlight the output

We can see a border around the table.

Update:

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

Highlight:

table, th, td

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.

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

Type:

table {

border-collapse: collapse;}

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

Highlight the output

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

Type:

width: 20%;

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

Type:

td {height: 40px;}

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

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

• The text inside the table can be aligned either to the left, right, center or justify.

[Image = horizontal-left.png]

[Image = horizontal-center.png]

• The text inside the table can be aligned either to the top, bottom, or middle.

[Image = vertical.png]

Let us try these.

Type:

text-align: center;

vertical-align: bottom;

Highlight:

text-align: center;

vertical-align: bottom;

And vertical alignment to bottom.

Highlight the output

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

And vertically aligned to the bottom.

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

Type:

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

Then 10 pixels for right and bottom.

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

Highlight the output

Padding is added to the header cell in the table.

Type:

color: blue;

background-color: lightblue;

Highlight:

color: blue;

background-color:lightblue;

Highlight the output

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

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

Point to the caption

Let’s change its position to bottom.

Type:

caption {

caption-side: bottom;}

Highlight the output

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

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

Let us summarize.

• Table properties in CSS and
• Customising the width, height, padding, colour and alignment of cells in the table

• Open the file webpage.html which you have created earlier.
• Add a table with a caption

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

About Spoken Tutorial project

Please download and watch it.

For more details, please write to us.

Thank you for watching.