零基础学做网站培训介绍

当前位置:

网页table表格样式设置方法(css设置table样式)

通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求的界面。

table表格的样式设置

设置网页表格样式参数如下:

  • 行数,顾名思义,它定义的是表格一共有多少行,只能填整数数字。
  • 列数,定义表格的列数,只能填整数数字。
  • 表格宽度,定义表格的总宽度,可直接填入数值,后面的宽度选项,分为像素和百分比,当宽度单位为百分比时,表格的宽度可以根据浏览器的宽度自动伸展。
  • 边框粗细,定义表格的外边框宽度。
  • 单元格边距,它定义的是单元格中的内容与单元格边框的宽度,也就是单元格内的空白。

表格在我们导航网站制作过程会经常用到。生成的Table表格代码如下:


<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>
</table>

我们可以在HTML代码里加上border="1"来设置表格的边栏样式,同样也可以使用CSS来控制table样式。

CSS设置表格边框

CSS设置表格边框


table{border:1px solid #F00}

CSS给单元格添加边框

CSS给单元格添加边框


table td{border:1px solid #ddd;}

CSS设置表格边框合并

CSS设置表格边框合并


table
{
border-collapse:collapse;
}

CSS 设置表格的宽度和高度

CSS 设置表格的宽度和高度


table td{
width:80px;
height:30px;
}

CSS 设置表格背景


table{background:url(images/bg.jpg) repeat;}

相关阅读:

CSS如何控制Table表格实现自适应

网页中table表格如何修改边框颜色

table自适应:CSS控制table表格宽度超出网页的方法

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 网页如何添加背景音乐 视频教程附件下载 (1110164 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 网页如何添加视频动画 视频教程 (1101306 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另
  • table表格是网页制作中以前较常使用的一种布局方式,但随着DIV+CSS的兴起,table表格已辉煌不在。但它在我们制作网页中也是时有用到。table表格也可以
  • 很多自适应网站制作时都遇到这样的问题,文字和图片很容易实现自适应,但网站内容页的表格即很难实现自适应。当我们使用电脑浏览网站时,表格显示正常
  • 怎样在网页中嵌入表格 视频教程 (1113357 次浏览)
    网站如果需要使用一些数据时,使用表格来显示是特别好的方法。表格的优点在于它可以简洁明了地将图片、文本、数据和表单有序的显示在页面上,在不同的
  • page页面可以单独使用不同页面模板,这个我们都知道了,那怎么给不同的single文章页面设计不同模板呢?我们有二种方法: 第一种:通过代码来判断
  • 使用WP程序制作门户网站时,需要调用网站头条新闻,让第一个文章标题与其它的标题不一样,以形成新闻头条的效果。如下图:如何使用wp网站代码
  • 我们知道,网站伪静态可以形成静态页面,对于百度收录有着最大的好处。(相关知识:Discuz论坛后台SEO优化设置详细步骤)对于DISCUZ论坛程序实
  • 用wordpress程序建站时,往往很难去设置产品的大小、重量、单价等参数,好在wordpress有一个自定义栏目功能。我们可以通过wordpress自定义栏目给产品
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 在学习仿站教程时,我们在仿制某个目标网站,如果遇到引用了很多的CSS文件,应该拿哪一个命名为style.css呢?如:在Wordpress仿站教程中,我们