HTML table styles

Share with you a beautiful HTML table style. Each grid of this table has a background image.

First you need to download two images ,

cell-blue.jpg

cell-grey.jpg

named cell-blue.jpg and cell -grey.jpg

Copy the code below to where you want, remember to modify the image url

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url(&#39;cell-blue.jpg&#39;);
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url(&#39;cell-grey.jpg&#39;);
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>
<!-- Table goes in the document BODY -->
<table class="imagetable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

Friends who need it can use it directly, more exciting Please pay attention to other related articles on php Chinese website!

Related reading:

What is the difference between class and id

How to make the web page black and white

HTML web page font size setting

The above is the detailed content of HTML table styles. For more information, please follow other related articles on the PHP Chinese website!