Tables are one of the most important, but at the same time complex elements that should be present on web pages. With their help, it is convenient to submit important and useful information in a rather concise form. Of course, most editors in templates running on various engines allow you to automatically insert a table on a page of a site or a separate publication, but what if the design of a web resource, its pages are created from scratch? Then the beginning wizard may face a problem: how to make a table in HTML. Let's figure out how to correctly and quickly create this element.
Select Editor
First of all, when starting to create a table, you should decide on the editor in which you will work. Of course, the easiest way is to choose the program in which you create the main site code. But it is best to use a good old notebook for these purposes.
You may ask why complicate your life, because if you do everything at once in the editor, then the result can also be seen immediately, and also use the program hints.
Yes, this is true, but by creating a table from scratch, you can not only thoroughly study the very principle of its creation, but also prevent annoying typos and errors in the main code. Sometimes it happens that the cursor accidentally moves down, and in the process of writing an error creeps into the code, which is sometimes difficult to find. Having created the table in notepad, you can copy its code and paste it into the place you need.
Table creation algorithm
To begin with, we’ll draw up a short algorithm on how to make a table in HTML. This is necessary so that you understand the sequence of each step. Then we will analyze how to perform each of the points.
Let's start with the preparatory steps.
1. Draw on a sheet of paper a schematic image of the table.
2. Count the number of rows and cells. If the number of the latter is different - we consider for each row separately.
3. Define the number of header cells (for example, “No.”, “Name” cells, etc.) in a row.
4. We write down the main parameters of the table - color, height and width, text alignment - in general, everything that seems to you necessary.
Next, go directly to creating the table:
1. Insert table tags.
2. Insert line tags based on the amount that you need.
3. In the lines we insert the tags of the cells (ordinary and uppercase), also based on the amount that is written on your paper.
4. Set the parameters for the table as a whole.
5. If necessary, set indicators for individual cells.
6. Fill our cells with text.
Create a table
So, you have chosen the editor, now let's see how to create a table in HTML. The tag with the help of which the table (<table>) is inserted into the page code is paired, that is, our construction begins with this tag, and ends </table>.
Having inserted the table tags, we move on to creating rows and cells.
Just note that these elements are also paired. The <tr> tag specifies the strings, and <td> the cells.
For header cells, use the paired <th> element.
As already mentioned, the first thing to do is draw up the lines, then register cells in them already. In order not to get confused, we recommend either indenting each block in one or two lines, or register a new block of elements using the Tab key.
What might it look like? Like that:
- <table>;
- <tr>;
- <th> p / n </th>;
- <th> Last Name </th>;
- </tr>
- <tr>;
- <td> 1 <td>;
- <td> Ivanov </td>;
- </tr>
- </table>.
As you can see, there is nothing complicated about this. The main thing is not to get confused in the number of rows and cells. Otherwise, the table may skew.
We have examined the creation of a table in HTML, now we can move on to the parameters of the matrix itself, as well as its rows and cells.
Table options
When the code is written, you should pay attention to the following points: alignment in the HTML table, the color of the borders, background, text, and so on.
Table parameters are set in the <table> tag. These include:
1. Border - the width of the borders. It is an integer. By default, the borders of any table are zero.
2. Bordercolor - border color. It can be set as a hex color code (# 00008B), and its name in English (DarkBlue). By default, it is always gray.
3. Bgcolor - background color. Also set by code or name.
4. Align - alignment of the text behind the table. The default is left. There are the following options for this parameter:
- left - flow around the right;
- right - flow around the left;
- center - displays the table in the center without wrapping.
5. Width and height - the width and height of the table. It can be set both in pixels and in percent (relative to the size of the browser window).
When registering a particular indicator, special attention should be paid to the design. After specifying the parameter, the equal sign should follow, after which the set value is indicated in quotation marks.
As for the color of the text, it is made out in the same way as plain text in HTML format.
Table layout example:
- <table border = ”2” bordercolor = “# 00008B” bgcolor = “#FFFFFF” align = “center” width = “800” height = “800”>;
- <tr>;
- <th> p / n </th>;
- <th> Last Name </th>;
- </tr>
- <tr>;
- <td> 1 <td>;
- <td> Ivanov </td>;
- </tr>
- </table>.
String Options
So, we have already figured out how to make a table in HTML and write down its main parameters. But what if we need to select a row? Make it different from the main text of the table?
The parameters of the row are written in the <tr> tag in the same way as the table data. The following variables can be set for a string:
1. Already known to you are border, bordercolor and bgcolor.
2. Align - alignment of text in a line. It can take the values left, center and right.
3. Valign - this tag aligns the text vertically. It takes the following values:
- top - the text is aligned to the upper border;
- middle - in the center;
- bottom - on the lower border.
Example line design:
- <tr border = “3”, bordercolor = “# 00007F” bgcolor = “# FFFFE0” align = “center” valign = “middle”>;
- <th> p / n </th>;
- <th> Last Name </th>;
- </tr>.
Cell Options
And the last thing that you should pay attention to for those who want to know how to make a table in HTML is the parameters of individual cells, both regular and uppercase. In fact, everything is done exactly the same as for a table or row. The only thing added is two more important elements:
1. Colspan - this parameter indicates the number of columns over which the cell can extend.
2. Rowspan - already indicates the number of rows that this cell occupies.
Since the design is no different from writing a line, we will not give an example of code.
conclusions
Making a table is not as difficult as it might seem at first glance. The main thing when writing her code is perseverance and attention.
As for how to insert a table in HTML, it’s enough to copy and paste the code into exactly the place on your page where, in your opinion, it should be located.
Do not be afraid to experiment, and soon you will perfectly master the technique of creating tables. Good luck!