izmir escort
bodrum escort
upscalerolex.to is in fact of proper standard.
EducationWeb Development

CSS Table Property Information

In this tutorial, we will give you complete information about CSS Table properties.

CSS Table Property Introduction

You must know that the HTML table is used to show data in tabular format.

You can make Present Data through Tables a more interesting and useful style. For which Table Properties have been created in CSS.

You can customize the Border Setting, Caption, Cells, etc. of the Table by the Table Properties of CSS.

Different Types of CSS Table Properties

Various Table Properties are provided by CSS to customize HTML Table.

  • border
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells
  • table-layout

CSS Table Property

Border Property

The border property is used to define the border in the table. You can define a border for each element of the table. See the example below.

<!DOCTYPE html>

<html>

<head>

<title>CSS Table Border</title><style type=”text/css”>

table, th, td {

border: 1px solid green;

,

</style>

</head>

<body>

 

<table>

<tr>

<td>Row 1, Column 1 </td>

<td>Row 1, Column 2 </td>

</tr>

<tr>

<td>Row 2, Column 1 </td>

<td>Row 2, Column 2 </td>

</tr>

</table>

</body>

</html>

You can see the result like this.

CSS Table Property

Border-collapse-property

You must have seen in the above table that each element has different borders. And space has also been given in the middle of the border.

The work of removing this redundant border is done by the border-collapse property. With this, all the elements share the border and the space ends. It has two possible values, the first is separate and the second is collapse.

You can take a a diploma in web development and become an expert…

<!DOCTYPE html>

<html>

<head>

<title>CSS Table Border Collapse</title><style type=”text/css”>

table, th, td {

border: 1px solid green;

,

table {

border-collapse: collapse;

,

</style>

</head>

<body>

 

<table>

<tr>

<td>Row 1, Column 1 </td>

<td>Row 1, Column 2 </td>

</tr>

<tr>

<td>Row 2, Column 1 </td>

<td>Row 2, Column 2 </td>

</tr>

</table>

</body>

</html>

You can see the result like this.

CSS Table Property

Border-spacing property

This property is used to define the distance between one cell to another. Which you can control from both sides.

If you declare only one value, then it sets the equal distance from both the sides i.e. Vertically and Horizontally.

And if you declare both the values, then the first value defines the distance horizontally and the second value defines the distance vertically.

<!DOCTYPE html>

<html>

<head>

<title>CSS Table Border Spacing</title><style type=”text/css”>

table, th, td {

border: 1px solid green;

,

table {

border-spacing: 10px;

,

</style>

</head>

<body>

<table>

<tr>

<td>Row 1, Column 1 </td>

<td>Row 1, Column 2 </td>

</tr>

<tr>

<td>Row 2, Column 1 </td>

<td>Row 2, Column 2 </td>

</tr>

</table>

</body>

</html>

You can see the result like this.

CSS Table Property

Caption-side property

You must have defined the title i.e. Caption in the HTML Table. Which appears above the By Default Table. The caption-side property is used to control the position of the table caption. Its possible values ​​are top, bottom left, and right.

<!DOCTYPE html>

<html>

<head>

<title>CSS Table Caption Position</title><style type=”text/css”>

table, th, td {

border: 1px solid green;

,

table {

caption-side: top;

,

</style>

</head>

<body>

<table>

<tr>

<td>Row 1, Column 1 </td>

<td>Row 1, Column 2 </td>

</tr>

<tr>

<td>Row 2, Column 1 </td>

<td>Row 2, Column 2 </td>

</tr>

</table>

</body>

</html>

You can see the result like this.

CSS Table Property

Empty-cells property

Many times we do not have enough data, then some cells are left blank. Whatever appears in the table and increases the size of the table.

But, you can hide the border of these empty cells by the empty-cells property. It can have two possible values. With the show, you display the border and with hide, you hide the border.

 

<!DOCTYPE html>

<html>

<head>

<title>CSS Table Empty Cells Property</title><style type=”text/css”>

table, th, td {

border: 1px solid green;

,

table {

empty-cells: hide;

,

</style>

</head>

<body>

<table>

<tr>

<td>Row 1, Column 1 </td>

<td>Row 1, Column 2 </td>

<td>Row 1, Column 3 </td>

</tr>

<tr>

<td>Row 2, Column 1 </td>

<td>Row 2, Column 2 </td>

</tr>

</table>

</body>

</html>

 

You can see the result like this.

CSS Table Property

Table-layout property

The table-layout property is used to control the layout of the border according to the data. This property has two possible values. Cells are displayed equal length-width with a fixed value. And the auto value is displayed according to the cell data length.

<!DOCTYPE html>

<html>

<head>

<title>CSS Table Layout Property</title><style type=”text/css”>

table, th, td {

border: 1px solid green;

,

table {

table-layout: auto;

,

</style>

</head>

<body>

 

<table>

<tr>

<td>Row 1, Column 1 </td>

<td>This is Column 2 of Row 1. </td>

</tr>

<tr>

<td>Row 2, Column 1 </td>

<td>Row 2, Column 2 </td>

</tr>

</table>

</body>

</html>

Here you can see the result.

CSS Table Property

Join a web designing training in Delhi and learn advanced courses…

Information about other table properties

Till now you were reading about Table Properties available by CSS. And apart from these, you can also use some other CSS properties for the table.

You can also use CSS Text Properties, Color Property, Background Property, Width & Length Property, and Attributes that work with some Table Elements as CSS Properties.

You can also read: CSS Background Property Information

What have you learned?

In this tutorial, we have given you complete information about CSS Table Properties. I hope it will help you to learn about the CSS Table Property in Information.

 

Rakesh Kumar

Hello, this is Rakesh Kumar, I am a Website Designer and Developer and currently working for NGE... Next-G Education is Rated as one of the Best Training Institute in Delhi, Which Provides the Best Web Design & Development, Graphic Design, Video Editing, AutoCad, Architect Design, Internet Marketing Courses, Etc...

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button