1.html做个表格代码
html做个表格的步骤如下:1、首先新建一个html,点击<body>
html做个表格的步骤如下:1、首先新建一个html,点击<body>
中间,先填入表格内容;2、内容根据需求来写即可,示例代码如下:
语文 | 7:00-7:40 | 7:50-8:30 |
---|---|---|
数学 | 7:00-7:40 | 7:50-8:30 |
英文 | 7:00-7:40 | 7:50-8:30 |
3、然后在
中间输入样式表的样式;4、样式也根据个人的需求来设置即可,设置单元格的宽度高度,合并单元格,位置,颜色等等,示例代码如下:<style type="text/css">body{width:340px;height :800px;}table{border-collapse :collapse ;}th,td{width:100px;height:40px;border :1px solid black;font-size:12px;text-align :center;} </style>5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框,将相邻变合并。
6、预览结果如下所示,一个简单的表格就制作出来了。
#MyUl{list-style:none; margin:0; padding:0; width:401px; font-size:9pt; border:1px solid red; border-bottom:none; border-right:none} #MyUl li{width:100; float:left; border:1px solid red; border-left:none; border-top:none; padding:5px;} 姓名 性别 年龄 备注 张三 男 20 无。
table{
border-collapse: collapse; //相邻边被合并
background-color: #cccccc; //设置表格背景色
border-top: 1px solid #000000; //设置表格上边框颜色
border-left: 1px solid #000000; //设置表格左边框颜色
border-right: 1px solid #000000; //设置表格右边框颜色
border-bottom: 1px solid #000000; //设置表格下边框颜色
}
td {
border-right: 1px solid #000000; //设置td颜色
border-bottom: 1px solid #000000; //
}
表格制作练习可以到实战帮。
div比表格易于更新而且技术比较流行,下面给你说下
div css的优势:
1、内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。
2、改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件 衣服一样简单容易。
3、搜索引擎更友好,排名更容易靠前。
以上三点是N多好处最吸引人,最突出的三点。我就这三点进行一一介绍:
第一点、内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。
这个是DIV CSS技术最现着的特点,也是CSS存在的根源。完全的颠覆现在传统(table)网页设计的技术。所有现在用table制作的内容,都可以用CSS来解决掉,而且解决的更完美,更强大。不需要大家再表格套表格,只需要用div套div就可以实现以往表格套表格所有的美工,这样的结果就是使用div CSS技术,让生成的网页文件大小更精简,更小。table时代,一个页面表格达到10个以上是非常普遍的事情,但是现在用DIV CSS,一个table都可以不用,就完全达到之前的效果,这就直接导致网页文件大小比使用table时减少50%-80%,更节约各位站长的硬盘空间,访问者打开网页时更快,而且用div CSS时,不像以往使用table时,必须把全部table读取完了才显示页面内容,现在是可以读一个div就显示一个效果,大家打开网页不用等。好处真是明显而强大。
这个优点的确是显着的,凡是使用传统table建的网页,内容多的话,有时候达到30K左右都有可能,文件打了打开时,肯定就有0.0几秒的延迟。使用DIV CSS,由于没有表格使用,你前台打开看到的全是直接内容,CSS文件都是导入链接的,是另一个文件,根本和HTML文件大小没关系,这种生成的HTML文件,一个也就10K左右大小。文件数量少时看不出来,但是文件万级以上时,还是会节约几十M大小的。
这些优点其实拿到现在来说,个人感觉用处不大,为什么呢?
因为table虽然生成的HTML文件要大一些,占空间多点,但是现在的虚拟主机空间几百块钱就可以达到3G以上,一个中小型门户或是网站,完全够用,就算不够用,你数据量达到十万级别以上,生成的HTML文件也用不了2G,这个成本其实对于中小型网站长来说完全可以不计。再说使用table说的是打开速度慢。这个在现在的网络环境下面来说,也可以忽略的,现在大家上网都是用的宽带,至少也是512K以上,一个网页30K,打开也就一秒不到的时候,使用DIV CSS也就快那么0.0几秒,这基本上是大家感觉不到的。而且既然都是生成HTML,那对服务器来说影响的效果是一样的,只要你的虚拟主机网络稳定,那么在table和div css上就没差别。
但是使用table制作网页框架和表格时,全是选择化制作的,也就是说不用大家去写代码,很简单输入边框和行数列数就可以达到制作出来的要求,但是使用div CSS时,完全是靠手写代码,一个表格写四行代码的话,如果一个页面涉及十多个div表格生成,手写代码将超过50行,而且如果你数学不好,或是逻辑思维能力不强的话,你手写出来的表格将是乱78糟,出现表格重叠和位置完全不正确。因为用div css写表格时,表格间的逻辑排列关系完全是靠自己手写代码判断,如果你没有很强的手写代码能力和逻辑性,你所花费的时间,比你用table制作时间至少是4倍左右。基本上一个页面定义的ID和class类,完整页面是不会少于20个的,一个ID或class手写5句,你制作一个HTML页面将超过100句代码,当然其中很多是可以存成一个CSS文件来重复调用的。也就是说相同的页面内容的话,排版一样的情况下,可以直接导入链接CSS来实现。
<table>
<tr>;//定义行
<td>;第一行第一列</td>;//定义所在行的列
<td>;第一行第二列</td>
</tr>
<tr>
<td>;第二行第一列</td>
<td>;第二行第二列</td>
</tr>
</table>
以此类推即可O(∩_∩)O~
<html xmlns="">
<head>
<meta ; charset=utf-8" />
<title>;用CSS做表格</title>
<style type="text/css">
ul{padding:0;
width:324px; /*设置表格宽 */
height:42px; /*设置表格高*/
margin:30px;
border-top:red 1px solid; /*设置表格上边框*/
border-right:red 1px solid; /*设置表格右边框*/
}
li{ border-left:red 1px solid; /*设置表格左边框*/
border-bottom:red 1px solid;/*设置表格下边框*/
/*设置单元格边框*/
list-style:none; /*清除项目列表前的标记*/
float:left; /*设置单元格浮动,用于水平排列*/
display:block; /*设置单元格为块级元素于用语控制大小等*/
width:80px; /*设置单元格宽*/
height:20px; /*设置单元格高*/
text-align:center; /*设置单元格内文本对齐方式*/
}
/*原理就是利用项目列表的每个项目做出表格中的每个单元格,然后通过设置ul和li的边框达到设置表格的边框效果*/
</style>
</head>
<body>
<ul>
<li>;表格</li>
<li>;表格</li>
<li>;表格</li>
<li>;表格</li>
<li>;表格</li>
<li>;表格</li>
<li>;表格</li>
<li>;表格</li>
</ul>
</body>
</html>
我都做了注释了,你复制到记事本中,改下后缀名,打开看下效果!
如果懂CSS的话一看就明白了
可以这样:
<style type="text/css">
<!--
.style2 {font-size: 5pt}
-->
</style>
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<td colspan="3"><span class="style2">;列车时刻表 </span></td>
</tr>
<tr align="center" valign="middle">
<td><span class="style2">;随便打些字</span></td>
<td><span class="style2">;随便打些字</span></td>
<td><span class="style2">;随便打些字</span></td>
</tr>
<tr align="center" valign="middle">
<td><span class="style2">;随便打些字</span></td>
<td><span class="style2">;随便打些字</span></td>
<td><span class="style2">;随便打些字</span></td>
</tr>
<tr align="center" valign="middle">
<td><span class="style2">;随便打些字</span></td>
<td><span class="style2">;随便打些字</span></td>
<td><span class="style2">;随便打些字</span></td>
</tr>
</table>
转载请注明出处育才学习网 » css表格代码怎么写
本文主要为您介绍优秀团干部事迹怎么写,内容包括如何写好优秀团干部事迹简介,优秀团干部推荐表主要事迹怎么写,怎么写优秀共青团干部的主要事迹。我,***,**班学生,在本次评优活动中,我申请院优秀团干部。 共青团作为共产党的后备主力军,有着不可
本文主要为您介绍庆典主题词怎么写,内容包括征集公司二十周年庆典大会主题词,公司年会主题词怎么公司年会主题词怎么写,主题词怎么写。客户入场会前音乐 开场舞蹈 亲爱的中老年朋友们,在今天活动开始前让我们共同来欣赏一段由~~艺术团带来的
本文主要为您介绍打架场景怎么写,内容包括描写打架打斗的场景,这种打架的场面要怎么描写,小说中人物打架的场景怎么写。我自己写的,仅供参考:1.手中的白虹剑影翻飞,一道道白色的剑气随着舞动四散开来,周围的人稍稍靠近一点便是重伤。而灭绝老尼
本文主要为您介绍浏览器脚本怎么写,内容包括请问浏览器的脚本功能怎么打开,什么是浏览器脚本,写网页脚本可以用什么写谢谢了,大神帮忙啊。1,以IE为例,找到IE浏览器的菜单栏,菜单栏上有个名称为“工具”的菜单项(红框内),鼠标点击该菜单项后将会带
本文主要为您介绍入党涵条怎么写,内容包括入党涵调怎么写,入党调函怎么写,入党调函怎么写。函调内容:由党总支向申请人的直系亲属及联系密切的社会关系函调了解其政治历史情况。二、函调的时间:申请人经过一年以上的培养考察后,党组织采
本文主要为您介绍给妈妈洗脚的感受怎么写,内容包括给妈妈洗脚的感受200字,家长怎么写洗脚后的感受,给妈妈洗脚感受50字。小时侯,都是妈妈给我洗脚,现在我长大了,该我给妈妈洗脚了. 一天晚上,看到妈妈疲倦的坐在沙发上,于是我便端了一盆热水,拿着
本文主要为您介绍调查的报告书怎么写,内容包括调查报告怎么写,调查报告怎么写,调查报告怎么写及范文。调查报告一般由标题和正文两部分组成。 (一)标题。标题可以有两种写法。一种是规范化的标题格式,即“发文主题”加“文种”,基本格式为“**
本文主要为您介绍foot的音标怎么写,内容包括australianfoot音标怎么写,英语音标都怎么写,tooth音标怎么写。辅音部分(28个) [ p ] pot pig put people piano potato [ b ] book bag big j
本文主要为您介绍自由职业的英语怎么写,内容包括自由职业者的英文怎么说,自由工作的英语怎么写,“自由职业”用英文怎么说。自由职业的英文:freelance,读音:[ˈfri:lɑ:ns]。 freelance英 [ˈfri:lɑ:ns] 美 [ˈfri:l
本文主要为您介绍短信婚宴请帖怎么写,内容包括结婚请柬短信怎么写,婚礼邀请函短信格式怎么写,婚宴邀请短信怎么写。谨定于_2006_年公历11月22日(星期三 )为_我们___举行结婚典礼敬备喜宴--(这里通常空三格)恭请----(后面是空的)光临席
本文主要为您介绍检讨书怎么写200字左右,内容包括检讨书怎么写200字,检讨书200字左右的,检讨书200字。态度决定一切,细节决定成败。俗话说“合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。泰山不拒细壤,故能成其高;江海不择细流,
本文主要为您介绍成长小脚印怎么写,内容包括成长的小脚印这篇作文怎么写后记,成长的脚印作文怎么写,成长的脚印怎么写(作文600字)。走,就要踏踏实实,一步一个脚印;走,就要稳稳当当,一步一个成果;走,就要实实在在,一步一个收获。在我们成长的过程中,有
本文主要为您介绍一年的制定目标怎么写,内容包括一年的规划目标怎么写,怎么写一年的工作计划跟目标,怎样制定目标写计划/。目标 列计划的目的无非是通过白纸黑字,使得自己对自己的学习情况能够进行监督和检查。高一,高二学年,应把重点放在课本
本文主要为您介绍嫁的英语怎么写,内容包括(嫁)的英语单词怎么写,结婚的英文怎么写,“我嫁你”用英语怎么写。您的问题很简单。呵呵。百度知道很高兴帮助您解决您提出的问题。原句: 结婚翻译: marry;get married;marry upma
本文主要为您介绍怎么联系写代码,内容包括初学如何开始联系自己写代码是背一些好的代码还是按着别人的代,代码怎么写,代码怎么写。代码 code A.一组有序的数字或字母的排列,是代表客观实体及其属性的符号。 B.记录计算机程序的符号。 代码设
本文主要为您介绍面试填表格怎么写,内容包括应聘表格怎么填写表格,去公司面试,填表格要填写哪些方面,如何填写面试表格。没个公司不太一样。大体上会要写个人概况:求职意向:____________________(可以是一个与多个)姓名、性别、出生年月、健康
本文主要为您介绍递归伪代码怎么写,内容包括伪代码怎么写,用递归结构,用伪代码写出求N的阶乘的算法用伪代码写哦是初,伪代码的写法。伪代码(Pseudocode)是一种算法描述语言。使用伪代码的目的是为了使被描述的算法可以容易地以任何一种编程语
本文主要为您介绍外部css文件怎么写,内容包括引用外部css文件有几种写法,怎么写外部css文件,如何调用,引用外部css文件有几种写法。目前有两种引用方式,一种是通过在head里面的link来引用,另外一种是直接通过import来引用,示例代码如下:第一种:l
本文主要为您介绍qq空间怎么写代码,内容包括QQ空间的代码怎么编写,qq空间写代码,qq空间说说代码怎么弄。现在空间的代码其实都是JS什么是JS?? 就是 JAVA SCRIPT 一种JAVA脚本.. 下面是关于QQ空间JS代码的总结 大家认真
本文主要为您介绍作业表格怎么写,内容包括学习计划表怎么写,学习计划表怎么写,以表格的形式制作一份学习计划表(好的给分)。根据自己的优势和不足来制定学习计划。在制定计划之前,要对自己有个评估,看看自己有哪些成长中的优势是值得发扬的,有哪
本文主要为您介绍字体居中html代码怎么写,内容包括HTML文字居中怎么写,用代码写html语言怎么让字体居中,html居中代码怎么写。如果这排文字放在table里,这样写:<table><td align="center"> <;!--让td中的内容居中--><a
本文主要为您介绍css外部样式表怎么写,内容包括CSS外部样式表怎么写,css外部样式表在.css中怎么写,CSS外部样式表怎么写。新建一个 文本吧后缀改为.css然后直接在xxx.css里写CSS样式*{font-family:"黑体";font-size:12px