Tabelle Zelle mit einem Bild und Text zentriert unter

Question

Ich bin ein Student und versuche, eine Tabelle mit einem Bild in einer Zelle zentriert zu erstellen. Ich möchte auch Text unterhalb des Bildes in der gleichen Zelle zentriert hinzufügen. Hier ist mein HTML und CSS so weit. Angehängt ein Bild.

table { margin: auto; 
     width: 70%; 
     height: 500px; 
     border-collapse: separate; 
     border-spacing: 20px; 
} 
.tableImage { background-image: url(chick.png); 
       background-repeat: no-repeat; 
       background-position: center 
} 
caption { font-size: 1.5em; 
}  
td, th { border: 2px solid #3399cc; 
     padding: 5px; 
} 
td { text-align: center; 
} 
tr:nth-of-type(even) { background-color: #b3cce6; 
} 
tr:nth-of-type(odd) { background-color: #b3e6cc; 
} 


<table> 
<caption>The Polish Chicken</caption> 
<tr> 
    <th>text</th> 
    <th>text</ht> 
    <th>text</th> 
<th>text</th> 
</tr> 

<tr> 
    <td>text</td> 
    <td colspan="2", rowspan="4", td class="tableImage">Silver Laced Polish Chicken</td> 
    <td>text</td> 
</tr> 

<tr> 
    <td>text</td> 
    <td>text</td> 
</tr> 

<tr> 
    <td>text</td> 
    <td>text</td> 
</tr> 

<tr> 
    <td>text</td> 
    <td>text</td> 
</tr> 

<tr> 
    <td>text</td> 
    <td>text</td> 
    <td>text</td> 
    <td>text</td> 
</tr> 

</table> 

Answer 1

Hier ist ein Beispiel jsfiddle: https://jsfiddle.net/pwa6kg62/1/

<td colspan="2" rowspan="4" valign="bottom" class="tableImage"> 

I valign Eigenschaft einer Tabellenzelle verwendet haben vertikal den Text auszurichten.

Ich bin sicher, Sie haben Ihre Gründe, aber es wird dringend empfohlen, dass Sie keine Tabellenzellen für das Layout verwenden. Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar.

Answer 2

Geben Sie der .tableImage-Klasse ein Padding-Top, das größer als Ihr Bild ist.

Zum Beispiel:

.tableImage{ padding-top:200px;} 

Hier ist eine Geige Beispiel: https://jsfiddle.net/0xjygxmt/1/

Leichtere Nebennoten, ich sehe, sind, dass Sie das "t" und "h" in der zweiten Schließ </th> Tag umgesetzt haben und kein abschließendes <table> Tag, aber diese würden die betroffene Zelle nicht beeinflussen.