Creating simple tables

Hello, students! In this lesson, we will learn how to create simple tables in HTML.

Tables can be used to organize information in a clear and concise manner.

Topics

• What are HTML tables?
• How to create simple tables?
• Code examples

What are HTML tables?

HTML tables are HTML elements used to create tables on web pages.

They are identified by the <table> tag.

How to create simple tables?

To create a simple table, use the <table> tag.

The <table> tag has two mandatory attributes: border and cellspacing.

The border attribute specifies the width of the table border.

The cellspacing attribute specifies the spacing between table cells.

For example, the following code will create a simple table with a 1-pixel border and a 10-pixel spacing between cells:

<table border="1" cellspacing="10">
</table>

Code examples

Here are some code examples to create simple tables:

<table style="border: 1px solid black;" cellspacing="10">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

This code will create a table with two rows and two columns.

Each cell of the table will have a 1-pixel border and a 10-pixel spacing between cells.

You can also use other attributes to control the table’s behavior.

For example, the width attribute specifies the width of the table, and the height attribute specifies the height of the table.

Here is an example of how to use these attributes:

<table style="border: 1px solid black;" cellspacing="10" width="200" height="100">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

This code will create a table with two rows and two columns.

The table will have a 1-pixel border and a 10-pixel spacing between cells.

The table will be 200 pixels wide and 100 pixels high.

Exercises

• Create an HTML document with a simple table with three rows and three columns.
• Save the document and open it in a browser.

Observe how the browser displays the table.

Good luck!

Conclusion

Understanding how to create simple tables is essential for creating effective web pages.

Ready to learn more?

In the next topic, we will learn about adding table headers (th).