Style de tableau HTML

Je voudrais partager avec vous un magnifique style de tableau HTML. Chaque cellule de ce tableau a une image d'arrière-plan

Vous devez d'abord en télécharger deux. images,

cell-blue.jpg

cell-grey.jpg

nommé cell-blue.jpg et cell -grey.jpg

Copiez le code ci-dessous où vous le souhaitez, pensez à modifier l'url de l'image

<!-- 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>

Les amis qui en ont besoin peuvent l'utiliser directement, plus Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Quelle est la différence entre la classe et l'identifiant

Comment rendre la page Web en noir et blanc

Paramètre de la taille de la police des pages Web HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!