table多樣式設定 @ 狼翔天地

三種細線表格做法

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

立體表格

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

表格的邊框不斷在閃

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

不用嵌套製作同一行放兩個表格

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

另類圓角表格製作

原圖：<br />
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center><br />
<tr height=1><br />
<td rowspan=4 width=1></td><br />
<td rowspan=3 width=1></td><br />
<td rowspan=2 width=1></td><br />
<td width=2></td><br />
<td bgcolor=#43B5C9></td><br />
<td width=2></td><br />
<td rowspan=2 width=1></td><br />
<td rowspan=3 width=1></td><br />
<td rowspan=4 width=1></td><br />
</tr><br />
<tr height=1><br />
<td bgcolor=#43B5C9></td><br />
<td bgcolor=#43B5C9></td><br />
<td bgcolor=#43B5C9></td><br />
</tr><br />
<tr height=1><br />
<td bgcolor=#43B5C9></td><br />
<td colspan=3 bgcolor=#43B5C9></td><br />
<td bgcolor=#43B5C9></td><br />
</tr><br />
<tr height=2><br />
<td bgcolor=#43B5C9></td><br />
<td colspan=5 bgcolor=#43B5C9></td><br />
<td bgcolor=#43B5C9></td><br />
</tr><br />
</table><br />
<p>放大<br />
<table cellpadding=0 cellspacing=0 border=1 width=282 align=center><br />
<tr height=10><br />
<td rowspan=4 width=10></td><br />
<td rowspan=3 width=10></td><br />
<td rowspan=2 width=10></td><br />
<td width=20></td><br />
<td bgcolor=#43B5C9></td><br />
<td width=20></td><br />
<td rowspan=2 width=10></td><br />
<td rowspan=3 width=10></td><br />
<td rowspan=4 width=10></td><br />
</tr><br />
<tr height=10><br />
<td bgcolor=#43B5C9></td><br />
<td bgcolor=#43B5C9></td><br />
<td bgcolor=#43B5C9></td><br />
</tr><br />
<tr height=10><br />
<td bgcolor=#43B5C9></td><br />
<td colspan=3 bgcolor=#43B5C9></td><br />
<td bgcolor=#43B5C9></td><br />
</tr><br />
<tr height=20><br />
<td bgcolor=#43B5C9></td><br />
<td colspan=5 bgcolor=#43B5C9></td><br />
<td bgcolor=#43B5C9></td><br />
</tr><br />
</table><br />

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

虛線邊框表格

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

分類型表格

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

變色的單元格1，通過a:hover做.

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

變色的單元格2，已經做成了CSS，注意還有透明效果。

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

變色的單元格3，通過mouse事件做.有點微軟的味道。

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

透明表格

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

表格邊框顯示外陰影

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

限製表格的大小。

style="table-layout:fixed;word-break:break-all"

無論大圖還是文字，一律限制。

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

VML做圓腳表格

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

表格行換色

a，效果達到了，但應用不大。

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

b,利用腳本來控制

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

c，表格和控制分開，只需要指定表格 id 即可

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

d，做成了樣式表

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

根據單元格內容加亮

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

單擊表格換色

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

動態編輯表格

<html><br />
<head><br />
<style><br />
TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}<br />
</style><br />
<body style="font-family: verdana"><br />
<h2>Table Editor</h2><br />
<br><br />
<h3>Single click to select a cell, alt-click to select a row</h3><br />
<br><br />
<div id=TableContainer><br />
<table id=TheTable border=1 style="border-collapse: collapse; table-layout: fixed"><br />
<tbody><br />
<tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr><br />
<tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr><br />
<tr><td>Cell 3,1</td><td>Cell 3,2</td><td>Cell 3,3</td></tr><br />
</tbody><br />
</table><br />
</div><br />
<br><br><br><br />
<input id=ButtonAddRow style="width: 200px;" type=button value="Add Row" "addRow()"><br><br />
<input id=ButtonRemoveRow style="width: 200px;" type=button value="Remove Row" "removeRow()"><br><br />
<input id=ButtonAddCell style="width: 200px;" type=button value="Add Cell" "addCell()"><br><br />
<input id=ButtonRemoveCell style="width: 200px;" type=button value="Remove Cell" "removeCell()"><br><br />
<input id=ButtonMoveUp style="width: 200px;" type=button value="Move Up" "moveUp()"><br><br />
<input id=ButtonMoveDown style="width: 200px;" type=button value="Move Down" "moveDown()"><br><br />
<input id=ButtonMoveLeft style="width: 200px;" type=button value="Move Left" "moveLeft()"><br><br />
<input id=ButtonMoveRight style="width: 200px;" type=button value="Move Right" "moveRight()"><br><br />
<input id=ButtonEditContents style="width: 200px;" type=button value="Edit Contents" "editContents();"><br />
<input type=text style="display: none; width: 400px;" id=EditCell><br><br />
<input id=ButtonEditStyle style="width: 200px;" type=button value="Edit Table Style" "editStyle();"><br />
<input type=text style="display: none; width: 400px;" id=EditStyle><br><br />
<br />

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

<HTML><br />
<HEAD><br />
<TITLE>O_O"</TITLE><br />
<STYLE>.navPoint {<br />
COLOR:#ffffff; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt<br />
}<br />
</STYLE><br />
<br />
</HEAD><br />
<BODY scroll=no style="MARGIN: 0px"><br />
<TABLE border=0 cellPadding=0 cellSpacing=0 height="100%" width="100%"><br />
<TBODY><br />
<TR><br />
<TD align=middle id=frmTitle noWrap vAlign=center name="frmTitle"><IFRAME<br />
frameBorder=0 id=BoardTitle name=BoardMenu scrolling=no<br />
src="http://www.blueidea.com/img/common/logo.gif"<br />
style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 180px; Z-INDEX: 2"></IFRAME><br />
<TD bgColor=#333333 onclick=switchSysBar() style="WIDTH: 10pt"><SPAN class=navPoint id=switchPoint title=關閉/打開菜單>7</SPAN><br />
</TD><br />
<TD style="WIDTH: 100%"><IFRAME frameBorder=0 id=frmright name=forum<br />
src="http://www.blueidea.com/bbs/images/reply5.gif"<br />
style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 1"></IFRAME><br />
</TD><br />
</TR><br />
</TBODY><br />
</TABLE><br />
</BODY><br />
</HTML><br />

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

狼翔月影

狼翔天地

狼翔月影發表在痞客邦留言(0) 人氣()

«	四月 2024					»
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

狼翔天地

軟體、程式、下載、動漫、資源、好康、心情分享

table多樣式設定

歷史上的今天

留言列表

月曆

QR Code

最新文章

熱門文章

文章精選

文章搜尋

新聞交換(RSS)

誰來我家

文章分類

站方公告

最新訂閱

活動快報

痞客邦...

參觀人氣

我的連結

好友

美術

吃喝玩樂

Blog

服飾

MSDN

PHP

POWERED BY

«	四月 2024					»
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

«	四月 2024					»
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

«	四月 2024					»
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30