HTML Fundamentals Course: Building the Web
Sobre a Aula

Organization of data into cells – td

Hello, students! In this lesson, we will learn about how to organize data in table cells (td).

Table cells are used to store data in tables.

They are identified by the <td> tag.

Topics

  • What are table cells (td)?
  • How to organize data in table cells (td)?
  • Code examples

What are table cells (td)?

Table cells are HTML elements used to store data in tables.

They are identified by the <td> tag.

Table cells can contain text, images, links, or any other type of content.

How to organize data in table cells (td)?

To organize data in table cells, use the <td> tag inside the <tr> tag.

The <tr> tag represents a row of the table.

For example, the following code will create a table with one row and two columns, with data in the cells:

<table style="border: 1px solid black;" cellspacing="10">
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

This code will create a table with one row and two columns.

The first column will have the text “John.”

The second column will have the number “25.”

You can also use other attributes to control the behavior of the table cells.

For example, the style attribute can be used to specify the style of the table cells.

Here is an example of how to use this attribute:

<table style="border: 1px solid black;" cellspacing="10">
  <tr>
    <td style="text-align: center;">John</td>
    <td style="text-align: right;">25</td>
  </tr>
</table>

This code will create a table with one row and two columns.

The text in the first column will be centered, and the number in the second column will be right-aligned.

Code examples

Here are some code examples to organize data in table cells:

<table style="border: 1px solid black;" cellspacing="10">
  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>30</td>
  </tr>
</table>

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

The first two rows of the table will have data in the cells.

The third row of the table will have empty cells.

Exercises

  • Create an HTML document with a table with three rows and three columns.
  • Fill the cells of the table with data.
  • Save the document and open it in a browser.

Observe how the browser displays the table.

Good luck!

Conclusion

Table cells are an important tool for organizing information in tables.

Understanding how to organize data in table cells is essential for creating effective tables.

Ready to learn more?

In the next module, we will learn about forms.

Forms are used to collect information from the user.

In the next module, we will learn about form elements, such as input, textarea, and select.

We will also learn about submit and reset buttons.

Finally, we will learn about form validation.

We are looking forward to learning more with you!

Entrar na conversa
Rolar para cima