Learn HTML Part 20: How to Combine Tables in HTML

Learn HTML Part 20: How to Combine Tables in HTML

Geekers - In the previous discussion, we discussed how to create tables in HTML. In this discussion, the material discussed is about how to combine tables or merge cells in tables in HTML. You may be familiar with the term "merge cell"? in Microsoft Excel or Microsoft Word. Merge cell is a method of combining several cells into one in a table.


The use of merge cells is of course very much needed in compiling information in tables that require merging several cells into one. HTML itself also provides special attributes for merge cells, namely rowspan and colspan.



The majority of browsers such as firefox, chrome, opera, safari and internet explorer support the use of colspan and rowspan. Colspan and rowspan are also supported by HTML5. For further explanation, let's look at the explanation below:


Colspan and Rowspan


The use of the colspan and rowspan attributes is applied to the <td> tag and <th> tag. Colspan means merging several columns of cells into one cell while rowspan means merging several rows of cells into one row of cells.


Writing colspan:


<td colspan="number">


rowspan syntax :

<td rowspan="number">


The value of “number� the colspan and rowspan indicate the number of columns or rows to be combined into one. The following is an example of writing code and using colspan in HTML:

<!DOCTYPE html>

<html>

  <head>

   <title>Using Colspan in Tables in HTML</title>

  </head>

  <body>

   <table border="1">

    <tr>

     <th colspan="2">Data</th>

    </tr>

    <tr>

     <th>Name</th>

     <th>NIM</th>

    </tr>

    <tr>

     <td>Ridayanti</td>


<td>071401001</td>

    </tr>

    <tr>

     <td>Ahmad Zulham</td>

     <td>071401002</td>

    </tr>

   </table>

  </body>

</html>


After the above HTML code is executed in the browser, it will appear as shown below:


how to combine tables in html how to combine tables in html


As seen in the picture above, in the first row "Data" is applied colspan = “2" which combines the two columns into one.



As for examples of writing code and using rowspan in HTML as below:

<!DOCTYPE html>

<html>

  <head>

   <title>Using Rowspan in Tables in HTML</title>

  </head>

  <body>

   <table border="1">

    <tr>

     <th>No</th>

     <th>Name </th>

     <th>Hobbies</th>

    </tr>

    <tr>

     <td rowspan="2">1</td>

     <td rowspan="2">Ridayanti</td>

     <td>Badminton</td>

    </tr>

    <tr>

     <td>Travelling</td>

    </tr>

   </table>

  </body>

</html>


After the above HTML code is executed in the browser, it will appear as shown below:


use of rowspan in table html use of rowspan in table html


As you can see in the image above, in the second row which contains data for "No" and "Name" a rowspan is applied which combines the two rows, namely the second and third rows in columns one and two. For examples of the use of these two attributes you can see below:


how to merge html table how to merge html table


The example above is an example of using colspan and rowspan in HTML without using CSS (pure HTML). The following is an example of writing code and using colspan and rowspan using CSS to make the border and cell display more attractive:

<!DOCTYPE html>

<html>

  <head>

   <title>Using Colspan and Rowspan in HTML</title>

   <style type="text/css">

    table,th, td{

    border: 1px solid black;

    border-collapse: collapse; }

    table{ width: 30%; }

    th, td{ text-align:center; }

   </style>

  </head>

<body>

  <table>

   <tr>

    <th rowspan="2">No</th>

    <th rowspan="2">NIM</th>

    <th rowspan="2">Name</th>

    <th colspan="3">Absence</th>

   </tr>

   <tr>

    <td>Present</td>

    <td>Sick</td>

    <td>Permissions</td>

   </tr>

   <tr>

    <td>1</td>

    <td>071401001</td>

    <td>Ridayanti</td>

    <td>20</td>

    <td>0</td>

    <th>0</th>

   </tr>

   <tr>

    <td>2</td>

    <td>071401001</td>

    <td>Fika Amalia</td>

    <td>18</td>

    <td>1</td>

    <td>1</td>

   </tr>

  </table>

  </body>

</html>


After the above HTML code is executed in the browser, it will appear as shown below:


how to create a table in html how to create a table in html


Seen in the picture above, in the first row of cells "No", "NIM", and "Name" are applied rowspan = "2" to combine the first and second rows. Then, in the first row of cell "Absence" is applied colspan = "3" so that can combine three columns into one.



Now you understand how to combine tables in HTML, don't you? If so, see the next material regarding the use of bgcolor, rules and border attributes in HTML tables.

([25]Submit) Part 19: How to Make a Table (Tag Table)

([27]Submit) Part 21: Bgcolor Attributes, Rules & Border

Share:

Top Ads

Responsive Ads

Bottom Ads

Responsive Ads