網頁做表格
❶ 網頁的表格怎麼做的
提供幾種代碼：（每種代碼，保存成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>