table 单元格的宽度， 以及居中设置

table设置td宽度

听语音

• 
  
• |
• 浏览：1608
• |
• 更新：2016-11-11 18:40

• 

  1
• 

  2
• 

  3
• 

  4
• 

  5
• 

  6
• 

  7

分步阅读

网页设计中有时候会使用到table这个标签来在网页中插入表格，那么，在table中怎样设置td的宽度呢？td指的就是单元格，下面小编来讲解。

<tr> <td width="13%" style="text-align: center;"><strong>30% Off </strong></td>

</tr>

上面是对 表格单元格字体

单元格行占比13%宽度

文字居中显示 

加粗显示。

对于文字进行 字体设置 如何设置呢？

答案如下：

<tr> <td width="13%" style="text-align: center; font-size:40px"><strong>30% Off </strong></td>

在 style 中去加   font-size:  字体属性  就可以了。

代码和效果如下：

<table class="jbEidtTable" border="1" cellspacing="0" cellpadding="5" style="border-color: rgb(229, 230, 233); width:1000px; border-collapse: collapse;">
<tbody>
<tr> <td width="13%" style="text-align: center;"><strong>Discount</strong></td>
<td width="25%" style="text-align: center;"><strong>CouponCode</strong></td>
<td width="25%" style="text-align: center;"><strong>Pic</strong></td>
<td width="25%" style="text-align: center;"><strong>Product Info & Link</strong></td>
</tr>


<tr> <td width="13%" style="text-align: center; font-size:40px"><strong>30% Off </strong></td>

</tr>

效果：

工具/原料

• 电脑
• dreamweaver

方法/步骤

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

   

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

   

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

   

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

   

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

   

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

   

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