Tables

Tables

The table is a tag in HTML/CSS which is used to display the tabular data. The opening symbol of the table is < table> and the closing symbol is < /table>. It gives an arrangement to your data inside a table. In this article, we are going to explore the table and its style properties.

< tr> represents “Table Row”.
< th> represents “Table Header Cell”.
< td> represents “Table Data”.

Head and Body

< tr> has < th> and < td> tags for data entries. < tr> warps as many rows as required. If we use < thead> that indicates that the entire first row does not contains any data but only heading and we can put < th> tag inside the < thead> tag for clarification. And for wrapping the body data we use < tbody> tag.

Foot

Along < thead> and < tbody> there is also < tfoot> for wrapping the table’s footer. < tfoot> go after the < thead> and before < tbody> instead of being after < tbody>. In HTML5 the things with < tfoot> is opposite.

The cells < td> and < th>

< th> is for Tabular Header and < td> is for Tabular Data. We can put one or two elements inside a cell. We can make the table with the help of these tags. These help us to create the tabular format of data.

Styling of the Table

You can see most of the tables styled with colors and alignments. With the help of CSS, we can style our table as per need. For example, we can not distinguish between the border and the line with general HTML tags, but with the help of CSS, we can provide the size, padding, border-spacing, border-collapse, etc., of the border. In addition, CSS offers a facility for text alignment within the table.

Different types of styles offered by the CSS:-

  • Border: 1px solid #000; (Border size and colour is defined)
  • Padding: 0.5rem; (Provides spacing between the border and the context)
  • Text-align: left (Aligns the text inside the table to the left corner of the column)
  • Border-collapse: collapse (Merge the borders), etc.

We can do many various operations:-

  • Connecting Cells with colspan and rowspan.
  • Make the cell-wide or fill the container or beyond. With the help of < div> tag
  • Create two-axis table
  • When to use table
  • When not to use the tables
Elements Functions
< table > Create the table
< caption > Provides the caption of the table>
< thead > Table head
< tbody > Table body
< tfoot > Table foot
< tr > Table row
< th > Table header
< td > Table data
< col > Table column
< colgroup > Column group

Example No.1:

<html> <html lang="en-US"> <style> table, th, td { } </style> </head> <body> <h2>Knowledge2life</h2> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Knowledge2life</td> <td>Website</td> </tr> </table> </body> </html>

OUTPUT:

Knowledge2life

Firstname                                 Lastname
Knowledge2life                                 Website

Example No.2:

<html> <html lang="en-US"> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <h2>Knowledge2life</h2> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>nowledge2life</td> <td>Website</td> </tr> </table> </body> </html>

OUTPUT:

Knowledge2life

Firstname Lastname
nowledge2life Website