HTML, Text, and Tables

Even if nicely colored, a table must contain something, otherwise, it would have no purpose. Let’s see then how to combine and format a table properly so that it can hold text within it.

Text alignment Let’s see, once you’ve inserted some text, how to align the text within the table with the command align. First, let’s create the table.

Here is the table:

Let’s insert some text:

Here’s how the table with the text looks:

Here is my table

Perfect! Now, if we wanted to center the text like this:

Here is my table

the code will be:

Well yes, paragraphs come back into play. With the attribute p we identify a paragraph and with align we align it as we please, in our example, to the center. Clearly, for alignment, you can use the parameters left and as you choose. Margins If the text ends up being too close to the table border, you can increase the space between these two elements using the attribute cellpadding which allows us to create space in pixels. Let’s compare two tables, one without cellpadding and one with cellpadding: Without cellpadding:

Here is my table

With cellpadding set to 3px:

Here is my table

Here is the code with cellpadding:

SpacingNow let’s see how we can adjust the text spacing inside the table. Let’s take our example again by adding a line of text:

Here is my table Here is my table

Let’s now see how to eliminate the space created between the two text paragraphs to get this result:

Here is my table Here is my table

To eliminate the space, we used the tag “style“. With “margin-top” for the top spacing and “margin-bottom” for the bottom one, we can set these two margins to zero pixels, meaning, since each paragraph line is a separate line, we set the margins for each of them, one top and one bottom, eliminating it completely. Let’s try setting the top margin to 5 pixels for both paragraphs:

Here is my table Here is my table

As you can see, between the first and second paragraphs, at the top, a space of 5px is created. Now if I also set the bottom margin to 5px, we will get the following:

Here is my table Here is my table

Practice by assigning various measurements to the margins and trying out different combinations. This lesson you just saw is very important for the graphic design of the text.

Pubblicato in HTML & CSS