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

最新推荐文章于 2024-04-19 20:39:07 发布
最新推荐文章于 2024-04-19 20:39:07 发布
阅读量3.6w 收藏 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
关注
  • 21
    点赞
  • 踩
  • 60
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
利用js+css+html实现固定table的列头不动
11-26
话不多说，跟这小编来一起看下吧 1、CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2、Javascript [removed] //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b = $('#data_tbody').prev().find('tr:last').fi
漂亮的表格css+html
02-11
一个很好的表格html代码，里面包含了css表格类型，界面清晰、清爽、相当的漂亮！
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 1752
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
用HTML写一段制作美观表格代码
weixin_35751412的博客
01-03 724
这是一段制作美观表格的 HTML 代码： <table style="border: 1px solid black; border-collapse: collapse;"> <tr> <th style="border: 1px solid black; padding: 10px;">姓名</th> <th style...
Html漂亮的table样式模板
干饭银的足迹——博客
08-23 6454
Html漂亮的table样式模板
8款设计师常用漂亮的HTML CSS表格样式
大树叶 技术专栏
03-05 3万+
原来的地址： http://www.laozuo.org/2040.html 我们在布局网站的时候以前都可能直接用TABLE设计，如今都更流行使用CSS设计，这样对于网站结构更加友好和轻便。下面老左整理的8款设计师常用漂亮的HTML CSS样式是在国外网站看到的，也有用到自己的网站中，顺带分享到博客中，以便日后使用的时候直接下载，当然有需要的也方便网友朋友使用。 第一、简单的表格
几款好看的css表格
HLLLLLL_的博客
03-30 1万+
表格一： 代码： html代码段： 是用vs写的 表头<th>那是从数据库读取的数据段,<td>那是我为测试效果加的代码，大家可以自行更改。 <h1>待处理订单</h1> <table id="all-requst"> <thead> <tr> ...
简单好看的html表格模板,四款好看实用的css表格样式分享
weixin_32098457的博客
06-07 6372
!----=""{font-,,sans-;font-;#333333;border-width:1px;border-color:#999999;border-collapse:collapse;}table.hovertableth{background-color:#c3dde0;border-width:1px;padding:8px;border-style:solid;border-c...
收藏十一种常用简单实用漂亮的HTML表格样式
jipin246的专栏
03-05 2万+
收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格，会显得段落分明的效果，收到意想不到的效果。我下面用的是第三种效果 第一种：单格样式，可以不定义宽度，把width="100%"去掉即可： bordercolorlight="#333333" border="0"> 晓龙工作室   第二种：
HTML中Table表格的使用与漂亮的表格模板
pan_junbiao的博客
08-04 6万+
1、表格标记 表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。 标记 说明 表格标记<table> <table></table>标记表示整个表格。<ta...
好看的php表格样式,CSS_CSS实现的清爽、漂亮的表格样式分享，效果： 实现代码：复制代码 - phpStudy...
weixin_30937427的博客
03-09 451
CSS实现的清爽、漂亮的表格样式分享效果：实现代码：复制代码代码如下:CSS实现的清爽、漂亮的表格样式 - jb5t1.net/* CSS Document */ body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;background: #E6EAE9;...
漂亮的table样式（内附css）
08-10
漂亮的table样式（内附css） 漂亮的table样式（内附css）
Div+CSS对HTML的table表格定位用法实例
09-24
主要介绍了Div+CSS对HTML的table表格定位用法实例,文中讲到了CSS的定位差异问题需要的朋友可以参考下
jQuery+CSS实现的table表格行列转置功能示例
01-19
本文实例讲述了jQuery+CSS实现的table表格行列转置功能。分享给大家供大家参考，具体如下： 先来看看运行效果： 具体代码如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
html+css给单独某一表格定义样式示例
12-13
style type=”text/css”> .title { font-size:28px; font-weight:bold; } table.ss { border:1px solid #000; border-spacing:inherit; border-collapse:collapse; } .ss td { border:1px solid #000; border-...
精美表格html代码
郝大侠的博客
12-16 1万+
在做前台html中我们经常用到一些表格，苦逼的后台程序猿大多都简简单单的写一些标签，下面分享一下只用h5就能写出一些精美的form &amp;lt;form action=“” method=“”&amp;gt; &amp;lt;fieldset&amp;gt; &amp;lt;legend&amp;gt;Insert the title&amp;lt;/legend&amp;gt; &amp;lt;div align=“Cen
分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）
新林的博客
01-02 6382
想写一个很普通的那种word文档样式的table，发现网上很多都是什么教程，没有合适的，我只想要一个拿来就能用的html的table，没有什么别的依赖，而且样式要很普通的简单的表格。既然没有合适的，那我分享一个。以及记录一下在vue里面如何让浏览器弹出打印框打印这个表格table（一个在git上发现的好用的打印插件，不用install进项目，直接存一个js文件就能用，简单好用的vue打印插件）。下面代码粘贴出来另存为html文件就能直接用，没有别的依赖，先看效果图
HTML 做个漂亮的表格
dhxb45678的博客
01-28 1万+
本期我们主要讲述怎样做一个简单漂亮的表格，外加一点关于 表格 这方面的一些笔记和注意点。 目录 相关笔记 一、基本结构 二、相关属性（可以直接写在标签里） 三、合并单元格 实践：做一个 biu特佛 的表格 相关笔记 一、基本结构 <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th..
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 7万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
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、付费专栏及课程。

余额充值