html+css+table一些比较漂亮的表格

最新推荐文章于 2024-09-18 14:04:06 发布
最新推荐文章于 2024-09-18 14:04:06 发布
阅读量3.7w 收藏 60
点赞数 21
分类专栏： html/css/javascript 文章标签： css html table

各种不同样式的css+table

效果图

具体的html文件

<table id="hor-minimalist-a" summary="Employee Pay Sheet">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>

<table id="hor-minimalist-b" summary="Employee Pay Sheet">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>


<table id="ver-minimalist" summary="Most Favorite Movies">
    <thead>
    	<tr>
        	<th scope="col">Comedy</th>
            <th scope="col">Adventure</th>
            <th scope="col">Action</th>
            <th scope="col">Children</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Scary Movie</td>
            <td>Indiana Jones</td>
            <td>The Punisher</td>
            <td>Wall-E</td>
        </tr>
        <tr>
        	<td>Epic Movie</td>
            <td>Star Wars</td>
            <td>Bad Boys</td>
            <td>Madagascar</td>
        </tr>
        <tr>
        	<td>Spartan</td>
            <td>LOTR</td>
            <td>Die Hard</td>
            <td>Finding Nemo</td>
        </tr>
        <tr>
        	<td>Dr. Dolittle</td>
            <td>The Mummy</td>
            <td>300</td>
            <td>A Bug's Life</td>
        </tr>
    </tbody>
</table>

<table id="box-table-a" summary="Employee Pay Sheet">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>


<table id="box-table-b" summary="Most Favorit Movies">
    <thead>
    	<tr>
        	<th scope="col">Comedy</th>
            <th scope="col">Adventure</th>
            <th scope="col">Action</th>
            <th scope="col">Children</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Scary Movie</td>
            <td>Indiana Jones</td>
            <td>The Punisher</td>
            <td>Wall-E</td>
        </tr>
        <tr>
        	<td>Epic Movie</td>
            <td>Star Wars</td>
            <td>Bad Boys</td>
            <td>Madagascar</td>
        </tr>
        <tr>
        	<td>Spartan</td>
            <td>LOTR</td>
            <td>Die Hard</td>
            <td>Finding Nemo</td>
        </tr>
        <tr>
        	<td>Dr. Dolittle</td>
            <td>The Mummy</td>
            <td>300</td>
            <td>A Bug's Life</td>
        </tr>
    </tbody>
</table>


<table id="hor-zebra" summary="Employee Pay Sheet">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
    	<tr class="odd">
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr class="odd">
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>


<table id="ver-zebra" summary="Most Favorite Movies">
    <colgroup>
    	<col class="vzebra-odd" />
    	<col class="vzebra-even" />
    	<col class="vzebra-odd" />
        <col class="vzebra-even" />
    </colgroup>
    <thead>
    	<tr>
        	<th scope="col" id="vzebra-comedy">Comedy</th>
            <th scope="col" id="vzebra-adventure">Adventure</th>
            <th scope="col" id="vzebra-action">Action</th>
            <th scope="col" id="vzebra-children">Children</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Scary Movie</td>
            <td>Indiana Jones</td>
            <td>The Punisher</td>
            <td>Wall-E</td>
        </tr>
        <tr>
        	<td>Epic Movie</td>
            <td>Star Wars</td>
            <td>Bad Boys</td>
            <td>Madagascar</td>
        </tr>
        <tr>
        	<td>Spartan</td>
            <td>LOTR</td>
            <td>Die Hard</td>
            <td>Finding Nemo</td>
        </tr>
        <tr>
        	<td>Dr. Dolittle</td>
            <td>The Mummy</td>
            <td>300</td>
            <td>A Bug's Life</td>
        </tr>
    </tbody>
</table>

<table id="one-column-emphasis" summary="2007 Major IT Companies' Profit">
    <colgroup>
    	<col class="oce-first" />
    </colgroup>
    <thead>
    	<tr>
        	<th scope="col">Company</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
            <th scope="col">Q3</th>
            <th scope="col">Q4</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Microsoft</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
            <td>40.3</td>
        </tr>
        <tr>
        	<td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
            <td>39.3</td>
        </tr>
        <tr>
        	<td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
            <td>36.7</td>
        </tr>
        <tr>
        	<td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
            <td>29.3</td>
        </tr>
    </tbody>
</table>


<table id="newspaper-a" summary="2007 Major IT Companies' Profit">
    <thead>
    	<tr>
        	<th scope="col">Company</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
            <th scope="col">Q3</th>
            <th scope="col">Q4</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Microsoft</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
            <td>40.3</td>
        </tr>
        <tr>
        	<td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
            <td>39.3</td>
        </tr>
        <tr>
        	<td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
            <td>36.7</td>
        </tr>
        <tr>
        	<td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
            <td>29.3</td>
        </tr>
    </tbody>
</table>


<table id="newspaper-b" summary="2007 Major IT Companies' Profit">
    <thead>
    	<tr>
        	<th scope="col">Company</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
            <th scope="col">Q3</th>
            <th scope="col">Q4</th>
        </tr>
    </thead>
        <tfoot>
    	<tr>
        	<td colspan="5"><em>The above data were fictional and made up, please do not sue me</em></td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
        	<td>Microsoft</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
            <td>40.3</td>
        </tr>
        <tr>
        	<td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
            <td>39.3</td>
        </tr>
        <tr>
        	<td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
            <td>36.7</td>
        </tr>
        <tr>
        	<td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
            <td>29.3</td>
        </tr>
    </tbody>
</table>

<table id="newspaper-c" summary="Personal Movie Rating">
    <thead>
    	<tr>
        	<th scope="col">Favorite</th>
            <th scope="col">Great</th>
            <th scope="col">Nice</th>
            <th scope="col">Bad</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Passion of the Christ</td>
            <td>Bourne Ultimatum</td>
            <td>Shoot 'Em Up</td>
            <td>Ali</td>
        </tr>
        <tr>
        	<td>The Big Fish</td>
            <td>The Mummy</td>
            <td>Apocalypto</td>
            <td>Monster</td>
        </tr>
        <tr>
        	<td>Shawshank Redemption</td>
            <td>Cold Mountain</td>
            <td>Indiana Jones</td>
            <td>Dead or Alive</td>
        </tr>
        <tr>
        	<td>Greatest Story Ever Told</td>
            <td>I Am Legend</td>
            <td>Star Wars</td>
            <td>Saw 3</td>
        </tr>
    </tbody>
</table>


<table id="rounded-corner" summary="2007 Major IT Companies' Profit">
    <thead>
    	<tr>
        	<th scope="col" class="rounded-company">Company</th>
            <th scope="col" class="rounded-q1">Q1</th>
            <th scope="col" class="rounded-q2">Q2</th>
            <th scope="col" class="rounded-q3">Q3</th>
            <th scope="col" class="rounded-q4">Q4</th>
        </tr>
    </thead>
        <tfoot>
    	<tr>
        	<td colspan="4" class="rounded-foot-left"><em>The above data were fictional and made up, please do not sue me</em></td>
        	<td class="rounded-foot-right"> </td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
        	<td>Microsoft</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
            <td>40.3</td>
        </tr>
        <tr>
        	<td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
            <td>39.3</td>
        </tr>
        <tr>
        	<td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
            <td>36.7</td>
        </tr>
        <tr>
        	<td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
            <td>29.3</td>
        </tr>
    </tbody>
</table>

<table id="background-image" summary="Meeting Results">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Division</th>
            <th scope="col">Suggestions</th>
        </tr>
    </thead>
    <tfoot>
    	<tr>
        	<td colspan="4">IE 6 users won't see the transparent background if the hack is not applied</td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>Marketing</td>
            <td>Make discount offers</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>Advertising</td>
            <td>Give bonuses</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>Marketing</td>
            <td>New designs</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>Marketing</td>
            <td>Better Packaging</td>
        </tr>
    </tbody>
</table>


<table id="gradient-style" summary="Meeting Results">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Division</th>
            <th scope="col">Suggestions</th>
            <th scope="col">Rating</th>
        </tr>
    </thead>
    <tfoot>
    	<tr>
        	<td colspan="4">Give background color to the table cells to achieve seamless transition</td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>Marketing</td>
            <td>Make discount offers</td>
            <td>3/10</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>Advertising</td>
            <td>Give bonuses</td>
        	<td>5/10</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>Marketing</td>
            <td>New designs</td>
        	<td>8/10</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>Marketing</td>
            <td>Better Packaging</td>
            <td>8/10</td>
        </tr>
    </tbody>
</table>


<table id="pattern-style-a" summary="Meeting Results">
   <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
  </thead>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>

<table id="pattern-style-b" summary="Meeting Results">
    <thead>
    	<tr>
        	<th scope="col">Nation</th>
            <th scope="col">Capital</th>
            <th scope="col">Language</th>
            <th scope="col">Unique</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Japan</td>
            <td>Tokyo</td>
            <td>Japanese</td>
            <td>Karate</td>
        </tr>
        <tr>
        	<td>South Korea</td>
            <td>Seoul</td>
            <td>Korean</td>
            <td>Ginseng</td>
        </tr>
        <tr>
        	<td>China</td>
            <td>Beijing</td>
            <td>Mandarin</td>
            <td>Kung-Fu</td>
        </tr>
        <tr>
        	<td>Indonesia</td>
            <td>Jakarta</td>
            <td>Indonesian</td>
            <td>Batik</td>
        </tr>
    </tbody>
</table>
css样式： 


body
{
	line-height: 1.6em;
}

#hor-minimalist-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 45px;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
#hor-minimalist-a th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{
	color: #669;
	padding: 9px 8px 0px 8px;
}
#hor-minimalist-a tbody tr:hover td
{
	color: #009;
}


#hor-minimalist-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 45px;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
#hor-minimalist-b th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
#hor-minimalist-b td
{
	border-bottom: 1px solid #ccc;
	color: #669;
	padding: 6px 8px;
}
#hor-minimalist-b tbody tr:hover td
{
	color: #009;
}


#ver-minimalist
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#ver-minimalist th
{
	padding: 8px 2px;
	font-weight: normal;
	font-size: 14px;
	border-bottom: 2px solid #6678b1;
	border-right: 30px solid #fff;
	border-left: 30px solid #fff;
	color: #039;
}
#ver-minimalist td
{
	padding: 12px 2px 0px 2px;
	border-right: 30px solid #fff;
	border-left: 30px solid #fff;
	color: #669;
}


#box-table-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#box-table-a th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: #039;
}
#box-table-a td
{
	padding: 8px;
	background: #e8edff; 
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#box-table-a tr:hover td
{
	background: #d0dafd;
	color: #339;
}


#box-table-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: center;
	border-collapse: collapse;
	border-top: 7px solid #9baff1;
	border-bottom: 7px solid #9baff1;
}
#box-table-b th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #e8edff;
	border-right: 1px solid #9baff1;
	border-left: 1px solid #9baff1;
	color: #039;
}
#box-table-b td
{
	padding: 8px;
	background: #e8edff; 
	border-right: 1px solid #aabcfe;
	border-left: 1px solid #aabcfe;
	color: #669;
}


#hor-zebra
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#hor-zebra th
{
	font-size: 14px;
	font-weight: normal;
	padding: 10px 8px;
	color: #039;
}
#hor-zebra td
{
	padding: 8px;
	color: #669;
}
#hor-zebra .odd
{
	background: #e8edff; 
}


#ver-zebra
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#ver-zebra th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #039;
}
#ver-zebra td
{
	padding: 8px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #669;
}
.vzebra-odd
{
	background: #eff2ff;
}
.vzebra-even
{
	background: #e8edff;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children
{
	background: #d0dafd;
	border-bottom: 1px solid #c8d4fd;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action
{
	background: #dce4ff;
	border-bottom: 1px solid #d6dfff;
}


#one-column-emphasis
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#one-column-emphasis th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	color: #039;
}
#one-column-emphasis td
{
	padding: 10px 15px;
	color: #669;
	border-top: 1px solid #e8edff;
}
.oce-first
{
	background: #d0dafd;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
#one-column-emphasis tr:hover td
{
	color: #339;
	background: #eff2ff;
}


#newspaper-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #69c;
}
#newspaper-a th
{
	padding: 12px 17px 12px 17px;
	font-weight: normal;
	font-size: 14px;
	color: #039;
	border-bottom: 1px dashed #69c;
}
#newspaper-a td
{
	padding: 7px 17px 7px 17px;
	color: #669;
}
#newspaper-a tbody tr:hover td
{
	color: #339;
	background: #d0dafd;
}


#newspaper-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #69c;
}
#newspaper-b th
{
	padding: 15px 10px 10px 10px;
	font-weight: normal;
	font-size: 14px;
	color: #039;
}
#newspaper-b tbody
{
	background: #e8edff;
}
#newspaper-b td
{
	padding: 10px;
	color: #669;
	border-top: 1px dashed #fff;
}
#newspaper-b tbody tr:hover td
{
	color: #339;
	background: #d0dafd;
}


#newspaper-c
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #6cf;
}
#newspaper-c th
{
	padding: 20px;
	font-weight: normal;
	font-size: 13px;
	color: #039;
	text-transform: uppercase;
	border-right: 1px solid #0865c2;
	border-top: 1px solid #0865c2;
	border-left: 1px solid #0865c2;
	border-bottom: 1px solid #fff;
}
#newspaper-c td
{
	padding: 10px 20px;
	color: #669;
	border-right: 1px dashed #6cf;
}


#rounded-corner
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#rounded-corner thead th.rounded-company
{
	background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
}
#rounded-corner thead th.rounded-q4
{
	background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
}
#rounded-corner th
{
	padding: 8px;
	font-weight: normal;
	font-size: 13px;
	color: #039;
	background: #b9c9fe;
}
#rounded-corner td
{
	padding: 8px;
	background: #e8edff;
	border-top: 1px solid #fff;
	color: #669;
}
#rounded-corner tfoot td.rounded-foot-left
{
	background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
}
#rounded-corner tfoot td.rounded-foot-right
{
	background: #e8edff url('table-images/botright.png') right bottom no-repeat;
}
#rounded-corner tbody tr:hover td
{
	background: #d0dafd;
}


#background-image
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	background: url('table-images/blurry.jpg') 330px 59px no-repeat;
}
#background-image th
{
	padding: 12px;
	font-weight: normal;
	font-size: 14px;
	color: #339;
}
#background-image td
{
	padding: 9px 12px;
	color: #669;
	border-top: 1px solid #fff;
}
#background-image tfoot td
{
	font-size: 11px;
}
#background-image tbody td
{
	background: url('table-images/back.png');
}
* html #background-image tbody td
{
	/* 
	   ----------------------------
		PUT THIS ON IE6 ONLY STYLE 
		AS THE RULE INVALIDATES
		YOUR STYLESHEET
	   ----------------------------
	*/
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='table-images/back.png',sizingMethod='crop');
	background: none;
}	
#background-image tbody tr:hover td
{
	color: #339;
	background: none;
}


#gradient-style
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#gradient-style th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe url('table-images/gradhead.png') repeat-x;
	border-top: 2px solid #d3ddff;
	border-bottom: 1px solid #fff;
	color: #039;
}
#gradient-style td
{
	padding: 8px; 
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid #fff;
	background: #e8edff url('table-images/gradback.png') repeat-x;
}
#gradient-style tfoot tr td
{
	background: #e8edff;
	font-size: 12px;
	color: #99c;
}
#gradient-style tbody tr:hover td
{
	background: #d0dafd url('table-images/gradhover.png') repeat-x;
	color: #339;
}


#pattern-style-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	background: url('table-images/pattern.png');
}
#pattern-style-a thead tr
{
	background: url('table-images/pattern-head.png');
}
#pattern-style-a th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	border-bottom: 1px solid #fff;
	color: #039;
}
#pattern-style-a td
{
	padding: 8px; 
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#pattern-style-a tbody tr:hover td
{
	color: #339;
	background: #fff;
}


#pattern-style-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	background: url('table-images/patternb.png');
}
#pattern-style-b thead tr
{
	background: url('table-images/patternb-head.png');
}
#pattern-style-b th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	border-bottom: 1px solid #fff;
	color: #039;
}
#pattern-style-b td
{
	padding: 8px; 
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#pattern-style-b tbody tr:hover td
{
	color: #339;
	background: #cdcdee;
}


参考：http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/


zephyr_666
关注
专栏目录
HTML+CSS绘制表格
11-01 5967
概述： 本篇利用HTML和CSS完成表格的绘制，实现单元格高亮和表格圆角效果，如下图： 代码： table.html Tables Demo Modbus Protocol Data Num Address Type Data 1 0x01 uns
漂亮的表格css+html
06-27
一个很好的表格html代码，里面包含了大量的css表格类型，界面清晰、清爽、相当的漂亮！@
好看table样式 好看的CSS——Table样式表
04-01
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
好看的css table列表样式
07-19
好看的css table列表样式
html5+css3（表格，表单）
最新发布
2301_81256766的博客
09-18 1082
html5+css3，表格表单，form，table，input，option，
HTML 做个漂亮的表格
热门推荐
dhxb45678的博客
01-28 1万+
本期我们主要讲述怎样做一个简单漂亮的表格，外加一点关于 表格 这方面的一些笔记和注意点。 目录 相关笔记 一、基本结构 二、相关属性（可以直接写在标签里） 三、合并单元格 实践：做一个 biu特佛 的表格 相关笔记 一、基本结构 <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th..
漂亮的表格 HTML表格
07-01
漂亮的表格html,鼠标移动到表格上会自动通过CSS效果选中一行以及一列。
漂亮的html表格
尘墨
04-27 2946
原文： http://www.textfixer.com/resources/css-tables.php#css-table01    一个像素边框的表格： Info Header 1 Info Header 2 Info Header 3 Text 1A Text 1B Text 1C Text 2A Te
HTML Table 漂亮的CSS
03-26
HTML Table 漂亮的CSS 包含了格式各样的CSS，代码非常独立，肯定能够让你用到的。
html好看的表格
09-15
好看的html表格，可以做好的例子，希望能和大家分享，谢谢大家啊
漂亮的table样式（内附css）
08-10
漂亮的table样式（内附css） 漂亮的table样式（内附css）
挺好看的CSS TABLE样式
03-01
整体代码 博文链接：https://tylerxi.iteye.com/blog/215668
利用js+css+html实现固定table的列头不动
11-26
总结来说，实现固定table列头不动的技术主要涉及到CSS的绝对定位、JavaScript的事件监听和DOM操作。通过JavaScript动态调整固定表头的宽度和位置，以及CSS使其在滚动时始终保持可见，从而达到预期效果。这个方法不仅...
jQuery+CSS实现的table表格行列转置功能示例
01-19
本文实例讲述了jQuery+CSS实现的table表格行列转置功能。分享给大家供大家参考，具体如下： 先来看看运行效果： 具体代码如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
html表格行列转换,jQuery+CSS实现的table表格行列转置功能示例
06-03
这是一个简单的示例，使用 jQuery 和 CSS 实现了表格的行列转换功能： HTML 代码： ```html <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> <tr> <td>王五</td> <td>28</td> <td>男</td> </tr> </tbody> </table> ``` CSS 代码： ```css table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 5px; } tr { height: 30px; } td { text-align: center; } ``` JavaScript 代码： ```javascript $(function() { // 获取表格对象 var table = $('#myTable'); // 获取表头对象 var thead = table.find('thead'); // 获取表体对象 var tbody = table.find('tbody'); // 获取表头行对象 var trsHead = thead.find('tr'); // 获取表体行对象 var trsBody = tbody.find('tr'); // 创建一个新的表格对象 var newTable = $('<table>'); // 将新表格对象添加到页面中 table.after(newTable); // 获取新表格对象的 jQuery 对象 var newTableJqObj = $(newTable); // 遍历表头行对象 trsHead.each(function() { // 创建一个新的行对象 var tr = $('<tr>'); // 获取当前行对象的 jQuery 对象 var trJqObj = $(tr); // 遍历当前行的每个单元格 $(this) .find('th') .each(function() { // 克隆当前单元格的 jQuery 对象 var td = $(this).clone(); // 将克隆出来的单元格对象添加到新行对象中 trJqObj.append(td); }); // 将新行对象添加到新表格对象中 newTableJqObj.append(trJqObj); }); // 遍历表体行对象 trsBody.each(function() { // 遍历当前行的每个单元格 $(this) .find('td') .each(function(index) { // 如果当前行是第一行，则需要创建新的行对象 if (index === 0) { var tr = $('<tr>'); newTableJqObj.append(tr); } // 获取新表格对象的最后一行对象 var trJqObj = newTableJqObj.find('tr:last'); // 克隆当前单元格的 jQuery 对象 var td = $(this).clone(); // 将克隆出来的单元格对象添加到新行对象中 trJqObj.append(td); }); }); }); ``` 这段代码会将原表格中的行列进行转换，并在页面中生成一个新的表格对象。注意，这段代码只是一个简单的示例，可能存在一些问题，需要根据实际情况进行调整和优化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值