Mastering Table Design in HTML for Beginners

Mastering Table Design in HTML for Beginners

Tables are generally the combination of rows and columns.

Tables allows the user to arrange the data into rows and columns. Which makes easier to understand.

Table Definition:<td>

Each table cell is defined by <td> and a </td> tag.

td stands for table data.

Table Rows:<tr>

Each table is defined by <tr>

and ends with a </tr> tag.

tr stands for table row.

Table headers:<th>

sometimes if we want cells to be header cells. In these cases use the <th> tag instead <td>.

Table caption:<caption>

Defines the table caption.

Table Head:<thead>

It is used to group header content in an HTML page.

Table Body:<tbody>

Groups the body content into a table.

Table Foot:<tfoot>

Groups the footer content into a table.

Cell spacing: Used to make the space between each cell in HRML table.

By default the space is set to 2 pixels.

if we want to change the space between table cells, use the CSS border_ spacing property on table.

Cell padding: It is the space between the cell edges and the cell content.

Gap inside the cell is called padding.

By default padding is set to 0.

Col span: It specifies the number of columns a table cell should span. It allows a single cell to span the width of more than one columns/cell. and provides the same functionality as "merge cell" in spreadsheet like Excel.