Web page layout: (1) align and table layout
ancient times
Before, we spent a little time to understand the essence of html, so now, we will try to start writing our own html pages.
In ancient times, because there was no css cooperation, all layouts needed to be realized through html tags. At this time, you need to be familiar enough with html tags and their attributes in order to better complete the typesetting of content in a page .
In all visual tags, there is a general attribute align, which is used to set left, center or right. Well, it only supports horizontal orientation, not vertical orientation.
However, align has a problem that is prone to ambiguity, that is, in block-level tags, it describes the typesetting of internal text, not the block itself. For block-level tags with a width attribute, it describes the layout position of the block itself on the page. . . Therefore, in the later styles, the text-align style name appeared alone, just to avoid this kind of ambiguity that appeared in the ancient times.
CSDN illiterate Lao Gu's blog , https://blog.csdn.net/superwfei
Lao Gu's personal community , https://bbs.csdn.net/forums/bfba6c5031e64c13aa7c60eebe858a5f?category=10003&typeId=3364713
Page Layout
In the html layout, before the introduction of css, all layouts are sequential. Let's take a practical example to see the way of page layout in ancient times:
<p align="left" style="border:1px solid #ccc;">这里是第一个p，居左</p>
<p align="center" style="border:1px solid #ccc;">这里是第二个p，居中</p>
<p align="right" style="border:1px solid #ccc;">这里是第三个p，居右</p>
<p style="border:1px solid #ccc;overflow:hidden;"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" align="left" /></p>
<p style="border:1px solid #ccc;overflow:hidden;"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" align="center" /></p>
<p style="border:1px solid #ccc;overflow:hidden;"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" align="right" /></p>
<table border="1" width="200" align="left"><tr><td>居左的表格</td></tr></table>
<table border="1" width="200" align="center"><tr><td>居中的表格</td></tr></table>
<table border="1" width="200" align="right"><tr><td>居右的表格</td></tr></table>
<table border="1" width="200" align="center"><tr><td>居中的表格</td></tr></table>
<table border="1" width="200" align="left"><tr><td>居左的表格</td></tr></table>
<table border="1" width="200" align="right"><tr><td>居右的表格</td></tr></table>
<table border="1" width="200" align="center"><tr><td>居中的表格</td></tr></table>
It can be seen that for the paragraph tag p, align is the typesetting of the internal text
For the image tag img, there are only left and right alignments, and centering is ignored.
For the table label table, it is a floating layout method, that is, the float:left/center/right method in the style.
In addition to the influence of align, we can also see that all tags are typeset according to the writing order, the first paragraph text is left, the second paragraph text is centered, the third paragraph text has, top-down rendered sequentially.
For tags with a width attribute, align is equivalent to a floating layout. For example, the next few tables, according to the setting of align, are rendered at different positions. block. Therefore, the final effect you see is no longer trying tables 1, 2, 3, 4, 5, 6, and 7, but the layout shown in the figure.
Regarding the floating layout, we will elaborate on it later when the style is implemented. Today, we just need to understand the align in the ancient times.
table layout
In addition to the sequential layout, there are a lot of content, we hope they can be in the same row, but each has different separate settings, then the demand for the table is raised. For example, in a financial report, the first line is the header, all the text is centered, and the following lines are the content of the table. The first few columns are on the left, and the columns about numbers are on the right. There may be some information, such as status or For regions and the like, we may have to center them according to our habits.
So, let's take a look at the various tags used in the table. https://www.w3school.com.cn/html/html_tables.asp, I don’t know why w3school’s website has suddenly become an unsafe website, you can also go to the rookie tutorial to learn related content.
Just to list:
table defines the table
thead defines the table header
th defines the cells of the table header
tbody defines the table body
tr defines the rows in the table
td defines the cells in the table
Um. . . In fact, html is not strictly grammatical, so Lao Gu often only uses table tr th and td, which is enough.
For the td tag, he added a valign attribute. As the name suggests, this is a vertical distribution setting attribute, which can finally be vertically centered. However, the centered attribute is not center, but middle. Hey, use a table to reflect these settings
<table border="1">
<tr>
<td width="200" height="100" align="left" valign="top">left top</td>
<td width="200" height="100" align="center" valign="top">center top</td>
<td width="200" height="100" align="right" valign="top">right top</td>
</tr>
<tr>
<td width="200" height="100" align="left" valign="middle">left middle</td>
<td width="200" height="100" align="center" valign="middle">center middle</td>
<td width="200" height="100" align="right" valign="middle">right middle</td>
</tr>
<tr>
<td width="200" height="100" align="left" valign="bottom">left bottom</td>
<td width="200" height="100" align="center" valign="bottom">center bottom</td>
<td width="200" height="100" align="right" valign="bottom">right bottom</td>
</tr>
</table>
Well, the ambiguity of align appears again, although td has both width and align, but it is the same as p again, instead of floating.
Merge Cells
Of course, if this is the only way, the table layout method will not be popular in those years. His biggest advantage is that cells can be merged and then a more complex layout method can be performed.
Among the attributes of td, there are two special attributes rowspan and colspan, which respectively describe the current cell and need to occupy several rows and columns. When this property is not set, the default value is 1.
Let's take a look at a simple html example.
<table border="1">
<tr>
<td colspan="2" width="100" height="50">一个两列的单元格</td>
<td rowspan="2" width="50" height="100">一个两行的单元格</td>
</tr>
<tr>
<td rowspan="2" width="50" height="100">一个两行的单元格</td>
<td>中间空出的单元格</td>
</tr>
<tr>
<td colspan="2" width="100" height="50">一个两列的单元格</td>
</tr>
</table>
Due to the ability to merge cells, in ancient times, many complex typesetting were done through tables. We only need to count how many columns and rows we need to cut out, and how much each grid needs to occupy, and then we can make a layout we need.
Deprecation of table layouts
However, why are layout pages made with tables basically invisible now?
This involves the rendering method of the table. Even if other tags, including p, are not strictly matched and closed, we can continue to render downwards. However, due to the particularity of the table, if the table does not touch the end tag, you must read to the end of the html document to indicate that this is the end of the table, and then the table can be rendered and displayed on the page.
In the ancient times, due to the speed of the network, there was often a large table. Due to the slow transmission due to the speed of the network, the content before the table and the rendering on the page would end, while the table had not been read yet. The table end tag is not touched, so the table content does not start rendering, waiting for a long, long time. . . . If you are interested, you can make a table html page of more than 2000kb, and test it with a page with the same content but without table.
Therefore, after the style setting appeared, the way of table layout was gradually eliminated by everyone. It is not that the function is not strong, but that the problem of the rendering mechanism is too serious. . . . .
