如何用网页制作出好看的表格
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元素使开发人员能够整行应用样式，但是很难整列应用样式.为了解决这个问题。
网页的表格怎么做的？
提供几种代码：（每种代码，保存成html格式。）
第一种（CSS+JS）：
html
head
titleUntitled 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"
trtdaaaaaaaaaaa/td/tr
trtdbbbbbbbbbbb/td/tr
trtdaaaaaaaaaaa/td/tr
trtdbbbbbbbbbbb/td/tr
trtdaaaaaaaaaaa/td/tr
trtdbbbbbbbbbbb/td/tr
trtdaaaaaaaaaaa/td/tr
trtdbbbbbbbbbbb/td/tr
trtdaaaaaaaaaaa/td/tr
trtdbbbbbbbbbbb/td/tr
trtdaaaaaaaaaaa/td/tr
trtdbbbbbbbbbbb/td/tr
/table
script Language="Javascript"
for (i=0;itable1.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"
TD1/TDTD1/TDTD1/TDTD1/TDTD1/TD
/TR
TR class="t2"
TD2/TDTD1/TDTD1/TDTD1/TDTD1/TD
/TR
TR class="t1"
TD1/TDTD1/TDTD1/TDTD1/TDTD1/TD
/TR
TR class="t2"
TD2/TDTD1/TDTD1/TDTD1/TDTD1/TD
/TR
TR class="t1"
TD1/TDTD1/TDTD1/TDTD1/TDTD1/TD
/TR
TR class="t2"
TD2/TDTD1/TDTD1/TDTD1/TDTD1/TD
/TR
/TABLE
/BODY
/HTML
第三种（CSS+JS）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""
html xmlns=""
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"
trtd12/tdtd12/tdtd12/tdtd12/td/tr
trtd12/tdtd12/tdtd12/tdtd12/td/tr
trtd12/tdtd12/tdtd12/tdtd12/td/tr
trtd12/tdtd12/tdtd12/tdtd12/td/tr
trtd12/tdtd12/tdtd12/tdtd12/td/tr
/table
script type="text/javascript"
!--
var Ptr=document.getElementById("tab").getElementsByTagName("tr");
function $() {
for (i=1;iPtr.length+1;i++) {
Ptr[i-1].className = (i%20)?"t1":"t2";
}
}
window.onload=$;
for(var i=0;iPtr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
//--
/script
/body
/html
怎样制作一个网站
你好。首先下载Dreamweaver.exe并打开，选择你使用的编辑语言，本案例用html
打开页面后，选着设计窗口，如图所示。设计窗口可以快速布局网页，不需要自己编辑代码。
打开你要设计的网页的设计图，本经验是百度经验首页为例，首先我们制作顶上的搜索条，点击插入—表格（如图所示）。打开表格属性编辑表格属性。插入1行和5列，表格宽度为1130,（即为网页的宽度），边距，间距分别为0，此表格只是为了定位，因此不设边框。
设置好表格后，可在表格里面插入你的内容，首先我们插入logo,点击插入—图像—选择你要插入的图片。点确定即可完成logo插入。表格的小大高度都可根据设计图需要调整，鼠标移到表格边框虚线即可拖拉调整高度或宽度。如图所示
接下来我们来做搜索框，点击插入—表单—插入文本域—确定。插入文本框后可点击文本框调整文本框的属性。根据设计图，文本框上班还要添加内容，因此，可选择单元格右击选择表格—拆分单元格，此处是需要添加一行的内容，因此拆分为两行，如图所示。
用同样的办法拆分上面的行，因为要添加10个选择项，因此拆分为10列（右击选中的行—拆分单元格—10列—确定）。拆分好后在小格里面添加文字内容即可。表格大小可根据步骤四调整。
接下来我们做搜索按钮，同样根据设计图要把表格拆分为两行。点击插入插入按钮的图片。
接下来给按钮添加链接，本次经验分享的是静态网页，因此在此先跟大家分享怎么直接添加按钮链接。同样是点击插入—添加超级链接,填写你事先做好的页面链接，或者其他网站链接。
剩下的内容都可根据方法步奏逐渐添加，调节细节即可完成你想要设计的网页。如图所示是上面步奏所做的静态页面，把所有做好的网页用超级链接链接起来即可做成一个简单的网站
另外我们还可以采用front page。也可以很容易的实现。
望采纳。
暂无评论
发表评论