Working with HTML-tables

• Bloggen
• >
• HTML tutorials
• >
• Working with HTML-tables

Tables are an important part of web design. They allow you to display information in an organized manner. HTML tables can be daunting at first, but they’re actually quite simple once you know the basics. Let’s take a look at how to create HTML tables with code snippet examples.

Creating a Table: A basic HTML table is created using the <table> tag. Within this tag, each row is created using the <tr> tag, and each cell within that row is created using the <td> tag. Here’s an example of a simple table with two rows and two columns:

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Adding Table Headers: The <th> tag is used to create headers for the table. It functions just like the <td> tag, but is used for the first row of the table to indicate column headers. Here is an example with headers added to our previous table:

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

Header 1	Header 2
Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Colspan and Rowspan: The <colspan> and <rowspan> attributes can be used to make a cell span across multiple rows or columns. Here is an example that uses rowspan to create a cell that spans two rows:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td rowspan="2">Row 2-3, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
  <tr>
    <td>Row 3, Column 2</td>
  </tr>
</table>

Header 1	Header 2
Row 1, Column 1	Row 1, Column 2
Row 2-3, Column 1	Row 2, Column 2
	Row 3, Column 2

Styling a Table: CSS can be used to style a table. We can add borders and change the background color of alternating rows. Here’s a CSS example:

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

And here’s an example table with CSS applied:

Header 1	Header 2
Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2
Row 3, Column 1	Row 3, Column 2

Conclusion: HTML tables can be easily created using the <table>, <tr>, and <td>/<th> tags. The <colspan> and <rowspan> attributes can be used to make cells span multiple rows or columns. And CSS can be used to style the table and its contents. For more information, check out this resource from W3Schools.

  Written by: Steven Iversen     24-05-2023     Written in: HTML tutorials