怎么用CSS做表格

html-css09

怎么用CSS做表格,第1张

<!DOCTYPE html >

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style>

.table { border:#30C 1pxborder-style: solidheight:30pxmargin-top:-1px}

</style>

</head>

<body>

<div class="table"></div>

<div class="table"></div>

<div class="table"></div>

<div class="table"></div>

<div class="table"></div>

<div class="table"></div>

</body>

</html>

画表格

简单

直接用表格做

用css加边框

参考

<style>

table{

border-top:1px

solid

#ccc

border-right:1px

solid

#ccc

line-height:30px}

td{

border-bottom:1px

solid

#ccc}

td{

border-left:1px

solid

#ccc}

</style>

<table

width="100%"

border="0"

cellspacing="0"

cellpadding="0">

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

表格

css

结合

代码下:

<html>

<head>

<style>

.tab,.tab tr td{border:1px solid #000border-collapse:collapse}

</style>

</head>

<body>

<table class="tab">

<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>

<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>

<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>

<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>

<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>

</table>

</body>

</html>

说明:

.tab,.tab tr td{}

这个叫css集体声明,中间用英文的逗号隔开。作用是:同是把表格及单元格的一块声明,因为两者用的css是完全一样的。

属性说明:

border:1px solid #000设置表格边框的:宽度1px 实线 黑色

border-collapse:collapse作用是,合并相邻的双线,合为单线。