Tables

Arranging data into rows and columns can be done with the help of tables. The <table> tag is used in HTML to create tables. The data in the tables could be text, an image, lists, or other tables. The <tr> tag is the row tag while <td> tag is the table data tag that is used to create data cells. The data in <td> is left-aligned by default. The <caption> tag is used to name a table. <th> tag is used for row heading.

Bordered HTML Table

Borders for HTML tables can be specified in two ways.

  • In HTML, the border attribute of a table
  • In CSS HTML, the border property is used.

Table with padding for the cells

There are two ways to provide padding for table headers and table data:

  • The table's cellpadding property in HTML
  • In CSS, the padding property

    • The HTML table tag's cellpadding attribute is now deprecated.

    CSS width property:

    It is possible to express it in pixels or percentages. Our table width can be adjusted to meet our needs.

    Colspan used in HTML tables

    Use the colspan attribute to have a cell span multiple columns. One cell/row will be divided into numerous columns, with the number of columns determined by the colspan attribute's value.

    With rowspan, HTML table

    Use this attribute to have a cell span multiple rows. A cell will be divided into several rows. Rowspan values determine the number of divided rows.

    Example No.1:

    <html> <body> <h2>Knowledge2life</h2> <table style="width:100%"> <tr> <td>Website</td> <td>Online learning</td> </tr> <tr> <td>Knowledge2life</td> <td>yes</td> </tr> </table> </body> </html>

    OUTPUT:

    Website Online learning
    Knowledge2life yes

    Example No.2:

    <html> <style> table, th, td { border:1px solid black; } </style> <body> <h2>Knowledge2life</h2> <table style="width:100%"> <tr> <th>Website</th> <th>Country</th> </tr> <tr> <td>Knowledge2life</td> <td>India</td> </tr> <tr> </table> </body> </html>

    OUTPUT:

    Knowledge2life

    Website Country
    Knowledge2life India