HTML 테이블의 간단한 적용-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 테이블의 간단한 적용

迷茫

Jan 17, 2017 am 10:41 AM

html table th tr

이전 웹 페이지 레이아웃에서는 레이아웃을 위해 테이블을 사용했지만 시간이 지남에 따라 언어가 발전함에 따라 테이블 레이아웃 사용이 점점 줄어들고 있습니다. 이제 대부분의 웹 사이트에서는 div+ CSS 레이아웃을 사용하므로 검색 엔진이 그다지 친숙하지 않습니다. 웹 사이트 콘텐츠를 크롤링할 때 div+css 레이아웃이 검색 엔진에서 더 잘 크롤링될 수 있으므로 오늘은 테이블 레이아웃에 대해 이야기해 보겠습니다.

우선 테이블의 라벨이 무엇인지 알아야 겠죠?

, ,

,	아래 예시를 작성하고 이 태그를 예시에 적용해 보겠습니다 <!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> 로그인 후 복사 렌더링은 다음과 같습니다. 이 효과는 보기에 좋지 않습니다. 고정 너비를 설정하고 계속해서 개선해 보겠습니다. height, Border, 테두리는 실선 <!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> 로그인 후 복사 이 경우 테이블이 훨씬 더 보기 좋게 보일 것입니다. 물론 colspan rowspan이라는 속성도 있습니다. 개인 이력서를 작성하는 경우 테이블 레이아웃을 사용합니다. 이 두 속성은 행과 셀을 병합하는 데 사용됩니다. PHP 중국어 웹사이트의 HTML 기본 입문 과정에 이에 대한 예가 있습니다. 그것은 그것을 참조할 수 있습니다!

아래 예시를 작성하고 이 태그를 예시에 적용해 보겠습니다

<!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>

로그인 후 복사

렌더링은 다음과 같습니다.

HTML 테이블의 간단한 적용

이 효과는 보기에 좋지 않습니다.

고정 너비를 설정하고 계속해서 개선해 보겠습니다. height, Border, 테두리는 실선

<!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>

로그인 후 복사

이 경우 테이블이 훨씬 더 보기 좋게 보일 것입니다. 물론

colspan rowspan이라는 속성도 있습니다. 개인 이력서를 작성하는 경우 테이블 레이아웃을 사용합니다. 이 두 속성은 행과 셀을 병합하는 데 사용됩니다. PHP 중국어 웹사이트의 HTML 기본 입문 과정에 이에 대한 예가 있습니다. 그것은 그것을 참조할 수 있습니다!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.