HTML Tables - UX Adda

In this tutorial, you will learn HTML Tables

HTML Tables are a great way to present data in a structured and organized manner in HTML. Here is a tutorial on how to create tables in HTML:

Start by creating the table structure using the <table> element. This element acts as the container for the entire table.
Next, create the table rows using the <tr> element. Each <tr> element represents a row in the table.
Inside each row, create table cells using the <td> element. Each <td> element represents a single cell or data point in the table.
If you want to create a table header row, use the <th> element instead of <td>. The <th> element is used to create cells that will be used as table headers.
To add data to the cells, simply place the content inside the <td> or <th> element.
If you want to add a border to the table, use the border attribute on the <table> element.

<table border="1">

If you want to add styles to your table, you can use CSS. You can target specific elements of the table such as the rows, cells, headers, etc.

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

Here’s an example of a basic table structure:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

This is a basic tutorial, but there are many other attributes and elements you can use to customize your tables and make them more user-friendly and accessible.