> 웹 프론트엔드 > HTML 튜토리얼 > HTML 테이블의 간단한 적용

HTML 테이블의 간단한 적용

迷茫
풀어 주다: 2017-01-17 10:41:14
원래의
1597명이 탐색했습니다.

이전 웹 페이지 레이아웃에서는 레이아웃을 위해 테이블을 사용했지만 시간이 지남에 따라 언어가 발전함에 따라 테이블 레이아웃 사용이 점점 줄어들고 있습니다. 이제 대부분의 웹 사이트에서는 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>
로그인 후 복사

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

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 기본 입문 과정에 이에 대한 예가 있습니다. 그것은 그것을 참조할 수 있습니다!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿