當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

收藏十一种常用简单实用漂亮的HTML表格样式

發(fā)布時(shí)間：2023/12/10 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了收藏十一种常用简单实用漂亮的HTML表格样式小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

收集了十一種常用簡(jiǎn)單漂亮的表格樣式。有時(shí)候用文章中用上表格，會(huì)顯得段落分明的效果，收到意想不到的效果。我下面用的是第三種效果

第一種：單格樣式，可以不定義寬度，把width="100%"去掉即可：

<table cellspacing="0" bordercolordark="#efefef" width="100%"

bordercolorlight="#333333" border="0">
<tbody>
<tr bgcolor="#cccccc">
<td>曉龍工作室</td>
</tr>
</tbody>
</table>
<p> </p>

第二種：細(xì)線表格，代碼如下：

<table width="100%" border="1" bordercolor="#000000">
<tr bordercolor="#FFFFFF">
<td>表格邊線為1，線色為黑，行線色為白。</td>
</tr>
</table>
<p>
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF">表格邊線為0，間距為1，背景色為黑，行背景色為白。</td>
</tr>
</table>

第三種：立體表格，代碼如下：

<table border=1 cellspacing=0 width=100% bordercolorlight=#333333

bordercolordark=#efefef>
<tr bgcolor=#cccccc>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</td>
</tr>
<tr bgcolor=#cccccc>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
</tr>
</table>
<center>表格邊線為1，間隔為0，左上為#333333，右下為#efefef,行背景色為#cccccc

第四種：圓角另類表格，代碼如下：

第五種：邊框虛線表格，代碼如下:

LEFT:
#000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tb"><center>www.blueidea.com</td>
</tr>
</table>
<p>
虛線直線1
<hr size=1 style="border:1px dotted #001403;">
虛線直線2
<p size=1 style="border:1px dotted #001403;">

第六種:分類表格，代碼如下：

<fieldset>
<legend>item</legend>
content
</fieldset>

第七種：第1種變色單元格，通過(guò)a:hover做，代碼如下：

size:10px;color:white}
a:hover{background:#0099ff;color:black}
td{background:#3366cc;color:white;padding:0px}
</style>

<TABLE width=100% cellspacing=1 bgcolor=black >
<TR>
<TD><a href="#">Blueidea
<TD><a href="#">.com
<TR>
<TD><a href="#">CNBruce
<TD><a href="#">.com
</TABLE>

第八種：第2種變色單元格，通過(guò)CSS實(shí)現(xiàn)，體現(xiàn)透明效果，代碼如下：

<table width="100%">
<tr>
<td οnmοuseοver="this.className=’aa’" οnmοuseοut="this.className=’bb’"
class="bb"><center><b>cnbruce</td>
</tr>
</table>

第九種：第3種變色單元格，通過(guò)鼠標(biāo)事件實(shí)現(xiàn)，代碼如下：

<table width="100%" border="1" cellpadding="3" cellspacing="0"
bordercolor="#efefef" bgcolor="#efefef">
<tr>
<td onMouseOut="this.bgColor=’#efefef’;this.borderColor=’#efefef’";
onMouseOver="this.bgColor=’#cccccc’; this.borderColor=’#000033′"><div

align="left">
Blueidea</div></td>
</tr>
<tr>
<td
onMouseOut="this.bgColor=’#efefef’;this.borderColor=’#efefef’";

onMouseOver="this.bgColor=’#cccccc’; this.borderColor=’#000033′">
cnbruce</td>
</tr>
</table>

第十種：透明的表格，代碼如下：

<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100

border=0>
<tr><td><center>cnbruce</td></tr>
</table>

第十一種：邊框有外陰影效果，代碼如下：

<table align=center width=200 height=100 bgcolor=#f3f3f3
style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
<tr>
<td><center>www.cnbruce.com</td>
</tr>
</table>

總結(jié)

以上是生活随笔為你收集整理的收藏十一种常用简单实用漂亮的HTML表格样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： 2018蓝桥模拟赛·天上的星星暴力|二
下一篇：《HTML5与CSS3实战指南》——2.