如何设置html td 的宽度比例统一?

html-css010

如何设置html td 的宽度比例统一?,第1张

width属性值用%就行了,例如四个单元格就分别为25%

第一步,打开dreamweaver软件新建一个表格,如图,使用<table></table>标签对。

接着就是新建一行,使用<tr></tr>标签对,然后使用<td></td>标签对新建三个单元格。

接着我们在设计视图里面预览一下,如图,可以看到一行三列的表格。

接着我们在<td>里面添加一个“width”属性,width表示的就是宽度,如图所示。

然后给第一和第二个表格添加宽度,如图,第三个就不用添加,因为前两个已经确定,所以第三个也已经确定。

当然,也可以使用百分比来设定单元格的宽度,效果也是一样的。

7

如图,我们可以看下网页效果,三个表格的宽度都不一样了。

设置宽度有两种方式:

一就是使用<td>的属性width,如<td width="200">,不赞成使用这种方式。

二就是使用CSS层叠样式,如<td style="width:200px">,可设成百分比宽度20%等。

具体的请你查询HTML的table使用。

html页面中,定义table表格中每个TD的宽度,可以使用内联样式定义。

设置方法如下:

1、用table{ }标签定义了表格宽度;

2、用td{ }标签定义了单元格宽度。

此时整个表格的每个单元格宽度都会设置成功。

如下案例:

<!DOCTYPE html>

<html>

<head>

<title>表格边框宽度</title>

<style>

<!-- 定义表格宽度及样式-->

table{

text-align:center

width:500px

border-width:6px

border-style:double

color:blue

}

<!-- 定义单元格宽度及样式 -->

td{

width:158px

border-width:3px

border-style:dashed

}

</style>

</head>

<body>

<table border=1 cellspacing="3" cellpadding="0">

<tr>

<td>姓名</td>

<td class=tds>性别</td>

<td>年龄</td>

</tr>

<tr>

<td>张三</td>

<td>男</td>

<td>31</td>

</tr>

<tr>

<td>李四 </td>

<td>男</td>

<td>18</td>

</tr>

</table>

</body>

</html>