网页做表格
❶ 网页的表格怎么做的
提供几种代码：（每种代码，保存成html格式。）
第一种（CSS+JS）：
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.t1 {background-color:#336699;text-align:center}
.t2 {background-color:#ffcc00;text-align:center}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
</table>
<script Language="javascript">
for (i=0;i<table1.rows.length;i++) {
(i%2==0)?(table1.rows(i).className = "t1"):(table1.rows(i).className = "t2");
}
</script>
</body>
</html>
第二种（CSS）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
table{
width:100%;
}
.t1{
background:#ff6600;
color:black;
}
.t2{
background:#336699;
color:white;
}
</style>
</HEAD>
<BODY>
<TABLE cellpadding="0" cellspacing="0">
<TR class="t1">
<TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t2">
<TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t1">
<TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t2">
<TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t1">
<TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t2">
<TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
</TABLE>
</BODY>
</HTML>
第三种（CSS+JS）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行换色</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
tr.t1 td {background-color:#fff;}/* 第一行的背景色 */
tr.t2 td {background-color:#eee;}/* 第二行的背景色 */
tr.t3 td {background-color:#ccc;}/* 鼠标经过时的背景色 */
-->
</style>
</head>
<body>
<table id="tab">
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
</table>
<script type="text/javascript">
<!--
var Ptr=document.getElementById("tab").getElementsByTagName("tr");
function $() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
//-->
</script>
</body>
</html>
❷ 怎样利用表格制作网页
一、创建基复本的表格 一个表由＜制table＞开始， ＜/table＞结束，表的内容由 ＜tr＞,＜th＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名 称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜th＞组成的表格。 这里面有两个概念要弄明白：表格与单元格。他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：描述整个表格的属性标记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。 有这样一个概念后，我们学习起来就可能简单些。
❸ 谁告诉我怎么做网页表格啊
具体你是想要什么样的表格啊，最简单的，就是插入-表格 下面属性 边框：1
其它不用设就可以了
如果不喜欢这个边框，可以自己做一个。做法如下：
插入一个表格，边框：0 单元格边距：0 单元格间距：0 背景颜色可以设个自己喜欢的颜色；
然后在表格里再插入一个表格，间距：1，边距：0 边框：0
OK，一个自制的表格就完成了。
❹ Web制作 网页制作 html 表格
个人建议：浏览器F12查找，一般程序员宁可重写，也不愿查找错误
❺ 做网页时用表格和表单有什么区别
一、用处不同
1、表格：用于按行列方式展示数据。
2、表单：用于搜集不同版类型的用户输入权。
二、表现方式不同
1、表格：HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
2、表单：是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
三、组成元素不同
1、表格：tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
2、表单：多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。
❻ 如何在网页制作中用好表格
对许多不熟悉HTML的朋友来说，还以为是使用了CSS、JavaScript等技术，其实不然。看完下面的内容你就会明白了。 控制表格边框的显示 对使用Dreamweaver、FrontPage等所见即所得的网页编辑软件的朋友来说，很难控制表格的上下左右的边框显示与隐藏，其实你只要在HTML中的〈table〉〈/table〉标签页中添加一项“frame” 属性即可。 不显示表格边框(frame=void) 只显示表格的上边框(frame=above ) 只显示表格的下边框(frame=below ) 只显示表格的上下边框(frame=hsides) 只显示表格的左右边框(frame=vsides) 只显示表格的左边框(frame=lhs) 只显示表格的右边框(frame=rhs) 例如，〈table width="75%" border="1" frame=void/above/below/hsides/vsides/lhs/rhscellpadding="0" cellspacing="0"〉 〈/table〉 控制表格行与列的分割线 在网页设计中，如果版面没设计好，那么这个网页可以说是失败的。利用表格进行分栏，可以达到整齐排版的目的，美化你的网页外观。所谓分栏，就是让你的网页变成一个大表格，然后根据你的版面设计和内容安排，将这个表格分成不同的行和列，调整各个行和列的宽度和高度，以达到你排版的要求。当然了，你还可以在表格之中再嵌套表格，以达到更加复杂的排版需要。在设计过程中你可以灵活设置单元格边距和单元格间距的数值。在HTML语言中表格的分割线是由“rules”属性来决定的。所以我们可以通过手工修改源代码的方法来控制分割线的显示与隐藏。 1、显示所有分割线(rules=all) 如〈table width="75%" border="1" rules=all cellpadding="0" cellspacing="0"〉 2、不显示任何分割线(rules=none) 3、只显示行与行之间的分割线(rules=rows) 4、只显示列与列之间分割线(rules=cols) 用表格边框实现单线显示 用线条来美化网页是网页设计者经常使用的手法之一。在网页中除了用〈hr〉标记来实现插入水平线外，我们还可以用表格来实现。FrontPage2000默认的表格线比较粗，但只要稍加处理，就可以制作出一个细线表格，细线表格非常娟秀小巧，很有个性。它的具体操作方法是：在表格属性中将边框粗细设为“1”，将单元格边距和单元格间距设置为“0”，同时将亮边框设置成与表格背景相同的颜色，暗边框设成你想要的任一颜色即可，怎么样，细线表格出现了吧。
❼ 如何在网页中制作表格框架
table{
border:1px solid #000;/*黑色1像素粗边框*/
}
td{
border:none;/*这个是单元格，不给他要边框*/
}
以上是全局的，用了以后所有的表格都是这个样式。
如果你要给特定的表格加入这个样式：
1 给那个表格加上class='classname' （classname是你自己起的样式名）
2 然后在CSS里加上
.classname{
border:1px solid #000;/*黑色1像素粗边框*/
}
.classname td{
border:none;/*这个是单元格，不给他要边框*/
}
只有内边框没有外边框的话，我就只会用赖皮的方法：给table外面套一个overflow:hidden的div，宽度和高度比table小2px，给table加上margin-left:-1px;margin-right:-1px;这样把他的表格边框遮住。。
❽ 网页制作中表格排版
你可以把这个几个表格都放在一个表格里，先设置一个三行一列的表格；再把第一行设置成三列；在第一行第一列插入第一个竖表格，第一行第三列插入第二个竖表格，第三行插入一个横表格；设置第二行的高度（即两个竖表格和横表格之间的间隙了）代码如下： <table width="1003" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="250"> <!--第一个竖表格--> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle" height="200">第一个竖表格</td> </tr> </table> </td> <td width="10"></td> <td width="750"> <!--第二个竖表格--> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle" height="200">第二个竖表格</td> </tr> </table> </td> </tr> <tr> <td colspan="3" height="10"></td> </tr> <tr> <td colspan="3"> <!--第一个横表格--> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle" height="150">第一个横表格</td> </tr> </table> </td></tr> </table>
❾ 如何用网页制作出好看的表格
CSS制作好看的网页表格
如果数据表格对于视力没有问题用户都难以阅读的话，那么想像一个那些用辅助技术(掌上设备)的人来说，它们是多么复杂和混乱.幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性.
1.summary 和 caption
第一元素是表格的caption，它基本上用做表格的标题.尽管这不是必须有的元素，但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签，用来描述表格的内容.与image的alt文本属性相似.
2.thead, tbody, tfoot
thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如，可以将所有列标题放在thead元素中，这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元素，那么必须至少使用一个tbody元素.在一个表格中只能使用一个thead和tfoot元素，但是可以使用多个tbody元素将复杂的表格划分为更容易管理的部分.
3.col 和 colgroup
行与列标题应该使用th标记而不是td，但是如果某些内容既是标题又是数据，那么它仍然使用td.表格标题可以设置为row或col的scope属性，定义它们是行标题还是列标题.
虽然tr元素使开发人员能够整行应用样式，但是很难整列应用样式.为了解决这个问题。
❿ 网页制作的表格怎么做
<table width="312" height="124" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr> <td colspan="3"><div align="center">这是一个表格示例</div></td> </tr> <tr> <td><div align="center">姓名</div></td> <td><div align="center">姓别</div></td> <td><div align="center">年龄</div></td> </tr> <tr> <td><div align="center">张三</div></td> <td><div align="center">男</div></td> <td><div align="center">22</div></td> </tr> </table>