怎么制作出一个漂亮的html表格?html也能设计出美观的表格！

2015-09-16

今天和同行聊天，他给我发他做的表格，说是做的怎么样，我没有回复他具体怎么样，说真的，看着反正是不舒服，也可能是个人的审美不同吧。好了，题外话说完了，下面电脑技术吧就给大家带来怎么样才能制作出精美的html表格的方法。配合CSS样式表，我们很容易的就能做出一款美观实用的HTML表格。

用DW新建一个html页面,然后选择插入表格，接着我们设置参数，点完成

怎么制作出一个漂亮的html表格?html也能设计出美观的表格！

设置完成后如下所示

怎么制作出一个漂亮的html表格?html也能设计出美观的表格！

我们点击保存按钮保存到桌面看看默认的表格是长啥样的。

怎么制作出一个漂亮的html表格?html也能设计出美观的表格！

宽度是百分百，所以看着有点大，下面我们就调整一下，让这个表格美观起来！

1.在head区域添加 <style> </style> 为了方便后期添加CSS样式，以便能更好控制表格样式！

2.添加完STYLE标签后，我们开始添加样式我们先进行样式格式化，清除默认编距边框等。

怎么制作出一个漂亮的html表格?html也能设计出美观的表格！

3.添加个ID或者是CLASS 控制整个表格，这样好处是避免和其他表格冲突！

4.为表格统一设置为1px像素的细边框样式。建议大家收藏，以便后期使用！

最后效果如下：

怎么制作出一个漂亮的html表格?html也能设计出美观的表格！

需要的朋友可以参考下面的代码。我把代码附上来哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>怎么制作出一个漂亮的html表格?html也能设计出美观的表格！- www.zhishiwu.com  电脑技术吧</title>
<style>
/*格式化CSS样式  www.zhishiwu.com*/
*{ margin:0; padding:0; border:0;}
/*添加个ID或者是CLASS 控制整个表格，这样好处是避免和其他表格冲突！*/
#dnjsb { width:800px; height:auto; margin:0 auto;} /*设置ID为dnjsb的宽度为800像素 高度适应 绝对居中*/
#dnjsb table,#dnjsb table td,#dnjsb table th{border:1px solid #CCC;border-collapse:collapse; height:35px; line-height:35px;}
</style>
</head>
<body>
<div id="dnjsb">
<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

其中最主要的就是这个CSS样式代码了，大家可以看看看懂了后期设置啥的都比较方便哦

/*格式化CSS样式  www.zhishiwu.com*/
*{ margin:0; padding:0; border:0;}
/*添加个ID或者是CLASS 控制整个表格，这样好处是避免和其他表格冲突！*/
#dnjsb { width:800px; height:auto; margin:0 auto;} /*设置ID为dnjsb的宽度为800像素 高度适应 绝对居中*/
#dnjsb table,#dnjsb table td,#dnjsb table th{border:1px solid #CCC;border-collapse:collapse; height:35px; line-height:35px;}

（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）