Novice webmasters have to deal with a lot of problems. It would seem that today you can already use templates to create your sites, but the trouble is, they do not always have the necessary properties, and then you have to either create a website design from scratch or make changes to existing code. This is where knowledge of the HTML code and minimal ideas on how to set the background and color of the page, insert a picture or video, and make a table in HTML are required.
Getting started on a table
One of the most difficult things about HTML page layout is tables. And the problem is not in the complexity of tags, which, in fact, is not so difficult to remember, but in the fact that when writing code you can easily make mistakes - forget to write an extra line or cell, enter the text in the wrong place, and other little things . Moreover, the larger the table, the greater the chance of a mistake.
Therefore, starting to create a table in HTML, we recommend that you focus as much as possible and not be distracted.
First of all, you should draw a future table on a piece of paper, noting what and in which cell you will be in, as well as noting for yourself the main parameters of this or that element.
Next, you should calculate the number of rows in the table, as well as the number of cells in each row. We also recommend that you note such items as the presence of pictures in the table, the background color, borders, text. Only then can you start creating an HTML table using the recorded information.
Editor
So, you have created a table layout. Now you have to choose the appropriate editor to create it. You can select special site designers and make a table in them. Using this software, creating a table is no more difficult than creating a Word document. You can choose a program such as FrontPage. Despite the fact that the program is quite old, with its help you can create good sites, and besides, you can find more than one tutorial on it.
If you want to create a table in HTML using special code, you can use a regular notepad or a regular Word document for these purposes. True, here you will have to work hard, since it will take a long time to write code.
You can use the editor built into the site engine itself. So, when creating a record in many engines, it is possible to add different elements, including tables. Even if the basic features of the editor do not satisfy you, making changes to the code will be easier than writing it from scratch.
Tags
Regardless of which editor you use, before you start creating a table in html, you should remember the main tags. There are three of them - <table>, <tr> and <td>. Note that all tags are paired. The first tag denotes the table as a whole, the second defines the row, the third indicates the cell inside the row.
A bit more about each of the tags. A table always starts with the <table> tag and ends with </table>. For any browser, this is a symbol of the fact that the table is in front of it. Next, the lines are written that <tr> opens and ends the </tr> tag. On each line, using the <td> and </td> tags, the number of cells is registered.
Thus, the 2x2 table code will look like this:
<table>
<tr> <td>
</td> <td> </td> </tr>
<tr> <td> </td> <td> </td> </tr>
</table>
You can insert a table into the HTML code of the page by copying it from the selected editor.
Table, Row, and Cell Options
So, we have sorted the basic code. Now let's talk about how to improve the table, make it brighter and more attractive. To do this, you need to know the basic parameters of tags. They are written inside the opening tag, and an equal sign is placed after each parameter, and then its value is put in quotation marks. For example, the background in the HTML table is set like this: <table bgcolor = "#FFFFFF">.
We list a few basic parameters that will be most useful to you. Let's start with the table itself.
So, setting the border width will help the border parameter, which can take any numerical value. Border color sets bordercolor. The general background is set by bgcolor.
If you want to make the background of the table a picture, use background, and you should specify the URL of the picture.
Aligning the contents of the page around the table will help align, which can take the values left, center and right.
The paired <caption> tag, which is written immediately after the opening <table> tag, will help set the title.
A little bit about string parameters. The color of the cells in the row is set using bgcolor. Alignment of the text horizontally can be done using the parameter align (left, center or right), vertically - valign (takes the values top, middle or bottom).
Regarding the cell, it can be noted that the background color and background image are set for it using the same parameters as for the entire table. You can align text using the align and valign options.
There are also special parameters - colspan and rowspan. Using the first, you can specify the number of columns over which the cell will extend. The second sets the number of rows that this cell can extend to.
That's all the most useful options.
Color chart
Let's say a few words about such a useful thing as a color table. With its help, the background of the page, the color of the text, links and other elements are set. The color chart contains about 216 colors and shades. Each of them has its own hex code.
The code itself begins with a pound sign and contains three pairs of numbers or letters. For example, the green color in the table is code # 007F0. Each pair indicates the intensity of one of the three primary colors - red, green and blue. Using the table, you can select the color you need and set it using the code.
If you do not have the opportunity to use the table, you can set the color using its name in English.
Content
A few words about the content itself. Of course, most often we can see the text in the HTML table, but this does not mean that only we can put it there. Cells and lines can also contain pictures, audio and video files, links.
In order to place text or any other information in a cell (row), you should register it between two tags. For example: <td> name </td>. The cell displays "Name."
You can place graphic information and media files using special tags - <img>, <audio> and <video>.
Advice
Finally, we’ll give some useful tips that will help you quickly create an HTML table of any complexity.
When writing a table, we recommend that you first register the table tags themselves and its main parameters. Then write down the line tags. Start each pair with a new line. So you will see how many rows are in your table. Also write down the parameters of the string or strings, if they differ from the main ones. Then we advise you to start registering each cell, also from a new line. And it is advisable to make one or two indents Tab from the edge. Thus, you will see the code structure fairly clearly.
We recommend that you write the contents of cells and rows at the very end, when the table frame is ready.