Home > Article > Web Front-end > Basic properties of html tables
Basic properties of html tables
- 无忌哥哥Original
- 2018-06-29 10:01:222481browse
Table is the most important data formatting tool. It has a large number of applications in both front-end and back-end.
Let’s check out a few websites to see which content on the page is made of tables.
The table tag is used to create tables in HTML. This tag is a typical compound tag, because it is useless just to write it. It must be combined with the internal sub-tags to make sense.
The basic principle of creating a table is: first create rows, and then divide columns. A row and a column are called a cell, and all user data must be placed in the cell.
Use the label a34de1251f0d9fe1e645927f19a896e8 to create rows, use the label b6c5a531a458a2e790c1fd6421739d1c to create columns, and use 63bd76834ec05ac1f4c0ebbeaafb0994 for titles. Next we create the simplest table.
You will find that the newly created table does not look like a table at all. It does not even have the most basic table lines. It is for this reason that the table was used for layout in the earliest times, but it is not used now. of.
Let's add some basic attributes to this table, at least make it look like a table.
border: Set the width of the table border line.
cellspacing: Set the gap between cells, set to 0, which is equivalent to folding the cell edges. At this time, it automatically uses the border width of the table, such as 1.
cellpadding: Set the distance between the cell data and the border so that the content is not too crowded.
align: Set the alignment mode of the data in the cell. The default is left alignment. You can set right alignment and center alignment.
width: Set the width of the table, which can be an absolute value or a relative value as a percentage. It is recommended to set it to a relative value to adapt to data changes.
height: Set the height of the table. There is no setting here to adapt to changes in the number of rows in the table.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格的基本属性</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" align="center" width="80%"> <caption><h3>岛国明星TOP50排行榜</h3></caption> <!-- bgcolor可以设置行或单元格的背景颜色:skyblue天蓝色 --> <tr bgcolor="skyblue"> <!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 --> <th>ID</th> <th>姓名</th> <th>腰围</th> <th>腰围</th> <th>臀围</th> </tr> <tr> <td align="center">01</td> <td align="center">波多野结衣</td> <td align="center">88</td> <td align="center">59</td> <td align="center">85</td> </tr> <tr> <td align="center">02</td> <td align="center">小泽玛利亚</td> <td align="center">90</td> <td align="center">60</td> <td align="center">85</td> </tr> <tr> <td align="center">03</td> <td align="center">浅川梨奈</td> <td align="center">87</td> <td align="center">61</td> <td align="center">88</td> </tr> <tr> <td align="center">04</td> <td align="center">深田恭子</td> <td align="center">86</td> <td align="center">62</td> <td align="center">88</td> </tr> <tr> <td align="center">05</td> <td align="center">苍老师</td> <td align="center">88</td> <td align="center">68</td> <td align="center">90</td> </tr> </table> <!-- 使用之前学过的<a>标签来制作一个简单的分页,这里的<p>标签只起到一个简单的包装作用 --> <p align="center"> <a href="">首页</a> <a href="">上一页</a> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">...</a> <a href="">下一页</a> <a href="">尾页</a> </p> </body> </html>
The above is the detailed content of Basic properties of html tables. For more information, please follow other related articles on the PHP Chinese website!