Elegant and simple box with HTML

How to make with HTML, in a simple and practical way, a box to highlight part of the content of a web page.

When laying out a web page with HTML, it is very common to want to highlight a portion of text that you want to highlight. Many times we use tables and give them a border or a background to highlight their content, but they are not always very attractive. In this simple workshop, suitable for beginners, we are going to show how to make a beautiful box with few resources.

It is about using tables, but we will decorate them in a simple way, but that may be new for the less experienced. In principle, it is best that we take a look at the .

As you can see in the example, we are going to build three different boxes, although very similar. These boxes have a 1-pixel border and different colors for the cell background with the header and body of the box. The construction guidelines are as follows:

• Create a table with a background color as desired and with a space between cells of 1 pixel and a space between the border of the cell and its content of 3 pixels (these last attributes are cellspacing=”1″ cellpadding=”3″)
• The table will have two cells. One with the header of the table, where we will place the title of the box, and another with the content itself. Both cells will have their own styles. The title will be more prominent, putting bold or a color to the text that contrasts well and the body a more subdued color, to help the reading of the text.

The background colors of the cells must be assigned as we want it to appear in the table. Thus, the bottom of the table can only be seen in the space between cells, which we had indicated was a pixel.

first table

The first table has this code:

The color of the text of the cell with the headline is white, so that it contrasts with the background color of the cell, which in this case is the same as that of the table, since no color has been indicated in the cell.

The cell with the body of the table has turned pale yellow

second table

The second table that we have made simply has a small change in the font used for the texts, which we have made smaller. In addition, a background color has been assigned to the header with the headline of the table, so that it is different from the background assigned to the entire table

The code for the second table is as follows:

third table

To complicate the exercise a bit, we thought that the body of the highlighted box could be a set of options. We will put the options inside a table, but since the table with the options must have a different style than the general table, we have put one table inside another, that is, we have nested tables.

As you can see, this table does not differ much from the second table. Simply that the body of the table is another table. It is an interesting table nesting example to practice HTML.

You can see them on a separate page.

We can compare this article with your .