HTML Tutorial

Tables

HTML tables are used to structure and present data on web pages into rows and columns like a spreadsheet. Some of the tags used to make tables are:
<table> ... </table> Used to define start and end of a table
<tr> ... </tr> Defines start and end of a table row.
<th> ... </th> Defines a table header cell. Header cells default to bold and centered.
<td> ... </td> Defines a table cell.

Some attributes used in tables:
rowspan Make cells span over multiple rows.
colspan Make cells span over multiple rows columns.
Note: By default tables have no visible borders. I used CSS to make visible borders.

Table Examples

<table>
 <tr>
  <td>1</td>
 <tr>
</table>

<table>
 <tr>
  <td>1</td>
  <td>2</td>
 <tr>
</table>

<table>
 <tr>
  <th>1</th><th>2</th>
 </tr>
 <tr>
  <td>3</td><td>4</td>
 </tr>
</table>

colspan

<table>
 <tr>
  <th colspan="7">Jan 2024</th>
 </tr>
 <tr>
  <th>Sun</th> <th>Mon</th> <th>Tue</th>
  <th>Wed</th> <th>Thu</th> <th>Fri</th>
  <th>Sat</th>
 </tr>
 <tr>
  <td></td> <td></td> <td>1</td> <td>2</td>
  <td>3</td> <td>3</td> <td>5</td>
 </tr>
 </table>

rowspan

<table>
 <tr>
  <td rowspan="3">1</td> <td>2</td> <td>4</td>
 </tr>
 <tr>
  <td>3</td> <td>5</td>
 </tr>
 <tr>
  <td>6</td> <td>7</td>
 </tr>
 </table>