Every person who ever wanted to create a website for his project, faced with the problem of writing it. Not everyone wants to pay, and not every budget can allow it, for professional webmasters to create a site, so most website creators who begin their journey begin to learn layout methods. Because high-quality content and the availability of purchased space on the server for hosting a site is not enough for it to exist. First of all, you need to create a "skeleton" of the page.
What is table layout in html?
To answer this question, it is necessary to define the concept of layout.
Layout - the process of creating the structure of an html page, placing basic elements on it.
Table layout is, accordingly, the use of a table with an invisible outline as a page structure. That is, the page of the site will be a table with a certain number of columns and rows, where in each cell a certain element will be located.
Layouts of html-documents created by tabular layout are used in the vast majority of sites and have been used for more than 10 years. This is due to the simplicity of the structure formation, filling, as well as the universality of such markup, which is displayed equally in different browsers.
The first stage of creating a site
The table layout begins with the creation of markup: the html-code of the page is written with a table consisting of a certain number of columns and rows.
To create a table in html, a special <table> tag is used to open it. Inside it, the <tr> tags are used to create a row, <th> to create a table title, and <td> to create a column. Columns and headers are created inside the row tag, and any number of columns can be created in each row.
<table> <tr> <th> </th> </tr> <tr> <td> </td> <td> </td> </tr> </table>
The ability to create a table allows you to perform html-table layout of the page, so you need to find out what attributes the creation tags have and how to use them.
Basic table tag attributes
<table> tag
This tag, as a symbol of opening a table, serves to limit its structure, sets its position on the page and the general appearance of all cells, thanks to the attributes:
- The align property is used to align the position of the table; it can take the values “left”, “center” and “right”. That is, left alignment, center, and right edge, respectively.
- The background attribute allows you to set the background image for the table by reference to it.
- Bgcolor sets the background color of the table; the value can be a name or code of any color.
- Border determines the thickness of the borders of the table and is indicated in pixels.
- Bordercolor sets the border color.
- Cellpadding allows you to set the gaps between text and cell borders.
- The Frame property tells the browser to display the borders of the table, taking the values void, border, above, below, hsides, vsides, rhs, lhs. Which, accordingly, means not displaying the border, displaying a frame around the table, making visible only the top border or only the bottom, not hiding only horizontal borders or only vertical ones, displaying only the right or only the left border.
- The rules attribute carries information about which cell borders should be displayed. A value of none allows you to hide all borders, all indicates their display, cols specifies the position of the lines between the columns, and rows - between the lines.
<tr> tag
This tag creates a table row, is responsible for its appearance. It has a small set of attributes: align to align the text in the line, bgcolor sets the background color of the cell, bordercolor sets the border color around the line.
Tags <td> and <th>
These two tags have approximately equal functionality: they create a cell in a row and set the conditions for its display using attributes:
- Abbr allows you to make a brief comment on the cell.
- Align is responsible for aligning the contents with respect to three horizontal positions.
- Background is used to fill the cell background with a specific image.
- Bgcolor is used to set the background color in a cell.
- And bordercolor defines the color of the cell borders.
- Height is used to set the height of the cell.
- Nowrap is needed to prevent line breaks.
- Weight sets the width of the cell.
Website html example
Having studied the theory of working with tables in html, you can begin to create your own page layout. To do this, you need to decide what functional blocks will be on your site. This can be a header, basement, content block, side blocks. In html-table layout you only need to create a table.
In fact, at this stage, you can create a fully finished layout by setting the appearance of each element through the properties of the tags described above. And then it will only be necessary to copy the table code to each new page of the site so that it has one style. But this is quite inconvenient, since the page style will be saved only in its file, which means that if you need to change something, you will have to try hard to find the necessary style attribute in each document and change its value. But there is an option to optimize this process by using the CSS table layout method. Therefore, when creating an html table, there is no need to use style attributes in the document. The only attribute that you will have to use is id, which then allows you to access the style of only a single element. This is a universal attribute that applies with any tags. It takes on values consisting of latin letters and symbols.
When creating a table, you must specify the id for the <table> tag, for example, with the value “document”. Then, for the cell (tag <td> or <th>) allocated for the header, the id attribute can take the value “header”. The left menu cell can be called “left_side”, and the right menu can be called “right_side”. The content block, for example, will be called “content”, and the basement of the site will be called “footer”.
This will display the page in the browser.
The second stage of layout
The created document must be connected to the CSS style file in order to control the appearance of the page objects. To do this, create a CSS document, name it, for example, mystyle.css. And now inside the <head> tag in the main document of the page you need to write the following: <link rel = "stylesheet" href = "page_style.css" type = "text / css" />.
After that, prescribing the conditions for displaying elements in mystyle.css, you can change the appearance of the page as you like. For example, the color property sets the color of the text, and background determines how the background of the element will look. There are about 20 basic properties, applying which, you can change the position of the elements, their sizes, color and selection. Therefore, this layout is not very complicated and can be done even by a beginner, but how creative and interesting it will turn out is up to you.
CSS layout
As you know, now between the table and block layout in html, most webmasters choose the latter. This is due primarily to the fact that the code for the table layout is very cumbersome, and this slows down the loading of the site. The bulk of the code is explained by the presence of a complex structure of table tags (3 levels: <table>, then <tr>, and only after <th>.) This circumstance even covers such obvious advantages of table layout as a clear hierarchy of elements, a fixed position, cross-browser compatibility and simplicity layouts. But there is a solution to this problem precisely in the language of cascading style sheets (CSS).
Table layout via CSS can be implemented if, for example, the document contains only individual elements enclosed in a <div> tag, which are not a table. To optimize the code, you can create spreadsheet documents directly through the style properties. To do this, use the display property, which tells the browser how to perceive one or another element in the document. So, for example, if the value is table, then the element is displayed as a table, and if table-row or table-cell is the table row and cell, respectively. Thus, there is no need to use table tags in the html set.
Adaptive table layout
Adaptive layout involves changing the display of the site on different screens depending on the resolution and size of the display. This is a rather difficult task for the developer, as it requires careful calculations and testing on many platforms. Nevertheless, it is impossible to imagine any popular modern resource without using adaptation for different devices. And to solve this problem, CSS is used.
Firstly, in order for the site style to be uniform in all browsers, you need to reset all browser display standards using css reset in order to get rid of non-standard indents, selections and the like.
Secondly, it is necessary to receive media requests from devices connecting to the resource in order to obtain information about the screen resolution and apply the adaptation. To do this, the min-width, max-width and display properties are mainly used. The first two determine the boundaries of the expansion of the block, and the display property with a value of none allows you to hide large and non-functional blocks on displays with low resolution.
Examples
It doesn’t matter what method the developer uses to create the markup, he will be able to design it using CSS as unique and aesthetically pleasing as imagination is. Below are examples of HTML table layout.
One more example.
And you can arrange and so.
In fact, it doesn’t matter at all that the table layout no longer looks modern and relevant - this is easily offset by the creativity and literacy of the design.