Tables In Html

  • In HTML, The <table> element is used to design a table in web page.The <tr> element represents table row, with in the row <th> element is used to give headings and <td> element is used to give data in the fields.
  • border is the attribute of table element used to give border by assigning value.
  • cellpadding is used to give adjust the data in the cells .
  • cellspacing is used to give space between data cells.
  • rowspan is used to combine rows in a table.
  • colspan is used to combine columns in a table.
Sample Code to Create a Table :

  <DOCTYPE html>
<html>
<head>
<title>document</title>

                                   </head>
                                   <body>
                                              <table border="1" height="30px" width="60px">
                                              <tr>
                                               <th>heading 1</th>
                                               <th>heading 2</th>
                                              </tr>
                                               <tr>
                                               <td>data cell 1</td>
                                               <td>data cell 2</td>
                                               </tr> 
                                              </table>
                                   </body>

Example :

Code :


Output :

step 1 :Created table with 5 rows and 4 columns.

step 2 :Data given to each data field.


 Rowspan and Colspan:
  • Rowspan is used to combine number of rows into single row.
  • Colspan is used to combine number of columns into single column.
  • Both are attributes of td tag.
  • Both take integer as value.
Task: create given table using rowspan and colspan.
Code:

Step 1: creating table with 5 rows and 4 columns.



Step 2:adding rowspan and colspan to the table.

Step 3:Inserting data into fields of table.