How to Install Operating System ??Complete Guide Installing The Operating System

How To Setting Tables With CSS

In this tutorial we will discuss how to manage tables with CSS, actually, tables can be set in such a way as to use attributes in the table tag itself, but to make it look more interesting and cool, the table must be integrated with CSS.

The design of the table itself is actually a lot when we look for it in the search engine, it’s just that the design that when we take it in the search engine will be the same shape as the table that we made because the design results are not pure design.

Before going forward, there are a number of articles that you might be looking for.

READ TOO :

How To Setting Tables With CSS

This tutorial is actually not for designing tables to make them look attractive and cool, but rather than arranging tables with CSS to match what we want. There are a number of properties that we will use to make the table exactly what we want. The following properties will be used in this tutorial.

PropertyInformation
Border-collapseThe border-collapse property is used to separate lines or borders on a table
Border-spacingThe border-spacing property is used to make a distance between columns in a table
Caption-sideThe caption-side property is used to determine the location of a table caption
Empty-cellsDetermines whether the line is displayed when the column is empty

Actually, there is one property that the author removes because the property the author has not recognized it, but if later it turns out the author already understands it, it will be added again in the tutorial to arrange tables in CSS.

Separating Border In Tables With CSS

To be able to separate borders in a table with CSS, it uses border-collapse properties, where the borders on each table boundary such as columns and rows and on the parent table itself will be separated. Here’s an example.

<!DOCTYPE html>
<html>
<head>
     <title> Setting Tables with CSS </title>
          <style type = "text/css">
           table.satu {border-collapse: collapse;}
           table.dua {border-collapse: separate;}
           td.a {
                 border-style: dotted;
                 border-width: 3px;
                 border-color: # 000000;
                 padding: 10px;
                 }
           td.b {
                 border-style: solid;
                 border-width: 3px;
                 border-color: #333333;
                 padding: 10px;
                }
          </style>
</head>
<body>
    <table class = "one" border = "1">
        <caption> Collapse Border </caption>
        <tr> <td class = "a"> Cell A Collapse </td> </tr>
        <tr> <td class = "b"> Cell B Collapse </td> </tr>
    </table>
    <br/>
    <table class = "two" border = "1">
        <caption> Separate Border </caption>
        <tr> <td class = "a"> Cell A Separate </td> </tr>
        <tr> <td class = "b"> Cell B Separate </td> </tr>
    </table>
</body>
</html>

There are two tables above, one table with border-collapse property has a collapse value, another border-collapse property has separate values, please write the code above and open it in your browser. Border-collapse which has a separate value will look like separating itself from the column even the parent table in it.

How To Setting Tables With CSS
How To Setting Tables With CSS

Making The Distance Between Columns And Lines

To be able to make a distance between columns and rows, that is, by using the border-spacing property, wherein each column and row has a distance, as well as the main boundary it will have a distance depending on our size.

<!DOCTYPE html>
<html>
<head>
     <title> Set the table with css </title>
           <style type = "text/css">
            table {
                   border-spacing: 10px;
                  }
           </style>
</head>
<body>
      <table border = "1">
      <caption> Border Spacing </caption>
         <tr> <td> Cell Border Spacing </td> </tr>
         <tr> <td> Cell Border Spacing </td> </tr>
      </table>
</body>
</html>

If viewed from the browser, it will appear as shown below …

How To Setting Tables With CSS
How To Setting Tables With CSS

Set Title Position Or Table Caption

To make a title in the table using the tag caption, where the position of this caption tag is by default above the table, but with the caption-side property, we can move the caption position. Here’s an example.

<!DOCTYPE html>
<html>
<head>
     <title> Set the table with css </title>
         <style type = "text/css">
            table caption {
            caption-side: bottom;
            }
         </style>
</head>
<body>
     <table border = "1">
        <caption> Table Caption </caption>
        <tr> <td> Set the table with css </td> </tr>
        <tr> <td> Set the table with css </td> </tr>
     </table>
</body>
</html>

Actually, the value that can be given in this caption-side property is left, right, top, bottom, but some browsers sometimes do not support the left and right positions by default.

Eliminating Lines In Empty Columns

To be able to hide or delete a line in an empty column in a table you can use the properties of empty-cells, these cells are very smart, when there is an empty column the column will not show the border in the column. Here is the code.

<!DOCTYPE html>
<html>
<head>
     <title> Set the table with css </title>
          <style type = "text/css">
           table {
           empty-cells: hide;
           }
          </style>
</head>
<body>
      <table border = "1">
      <caption> Empty Cells </caption>
      <tr>
           <td> Set the table with css </td>
           <td> Set the table with css </td>
      </tr>
      <tr>
           <td> Set the table with css </td>
           <td> </td>
      </tr>
      </table>
</body>
</html>

From the table above there appears to be one of the last columns that have no value, usually if not empty-cells are added, in that column will display a line or border, as if there is a value in the column to overcome this using empty-cells.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

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