Tables

HTML tables allow developers to arrange data into rows and columns.

<table> tag is used to create a table, <tr> tag is used to create table rows, and <td> tag is used to create data cells.

Note: While HTML5 still supports attributes like border, cellpadding, and cellspacing for backward compatibility, it's recommended to use CSS for styling tables instead. These attributes are considered deprecated in favor of CSS properties.



Try yourself here


You can also define table headings using <th> tag.




Try yourself here


Table attributes and styling


Modern HTML5 Best Practices


In modern HTML5, it's recommended to use CSS for styling tables instead of HTML attributes. Here's a comparison:


    

  • Deprecated attributes (still work but not recommended):

      

    • border - Use CSS border property instead
      • 

    • cellpadding - Use CSS padding on <td> and <th> elements
      • 

    • cellspacing - Use CSS border-spacing property
      • 

    • width and height - Use CSS width and height properties
      • 

    

    • 



CSS Alternatives




Structural attributes (still valid in HTML5)


    

  • 

    Colspan and Rowspan
    

    • 



These attributes are still valid and used to merge cells:

* colspan attribute: Merges two or more columns into a single cell

* rowspan attribute: Merges two or more rows into a single cell


    

  • 

    Caption
    

    • 



You can add a caption to the table using the <caption> element (not an attribute).




Try yourself here