Simple application of HTML table-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Simple application of HTML table

迷茫

Jan 17, 2017 am 10:41 AM

html table th tr

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> Copy after login 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> Copy after login 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!

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>

Copy after login

The rendering is as follows:

Simple application of HTML table

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>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn