Home > Article > Web Front-end > Simple application of HTML table
In the previous web layout, we would use tables for layout, but with the growth of time and the advancement of languages, our use of table layouts has become less and less. Now most websites use div+ CSS layout, search engines are not very friendly to table layout. When crawling website content, div+css layout can be better crawled by search engines, so let’s talk about table layout today.
First of all, we need to know what are the labels of the table?
| , |
Let’s write an example below, and then apply these tags to the example <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1"> <tr> <th>ID</th> <th>名称</th> <th>价格</th> <th>库存</th> <th>上线时间</th> <th>操作</th> </tr> <tr> <td>1</td> <td>相机</td> <td>1499</td> <td>999</td> <td>2015.6.8</td> <td>修改 删除</td> </tr> </table> </body> </html> The rendering is as follows:
This effect is not very good-looking, let’s continue to improve the table Set a fixed width and height, and Border, the border is a solid line <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
width: 500px;
height:100px;
text-align: center;
}
td{
width:90px;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
<th>库存</th>
<th>上线时间</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>相机</td>
<td>1499</td>
<td>999</td>
<td>2015.6.8</td>
<td>修改 删除</td>
</tr>
</table>
</body>
</html>In this case, the table will look much better. Of course, we also have attributes in it, colspan rowspan If you are making a personal resume, use table layout, we These two attributes will be used to merge rows and cells. There are examples of this in the basic introductory course of HTML on the PHP Chinese website. Friends who don't know how to do it can refer to it! |
|---|
