Come prendere qualcosa da aderenti al fondo di un TD in CSS

August 20

Come prendere qualcosa da aderenti al fondo di un TD in CSS


Il CSS "vertical-align" proprietà consente di organizzare come il testo viene visualizzato in una cella: in alto, al centro o in basso. Per modificare l'allineamento solo per una specifica cella, è necessario applicare il CSS direttamente al "<td> </ td>" tag cella di una tabella, non al "<tr> </ tr>" tag riga della tabella. In combinazione con le dichiarazioni di margine cellulare e imbottitura, è possibile ottenere il testo o le immagini da attaccare al fondo della cella di una tabella.

istruzione

1 Aprire il file HTML che contiene il tavolo; sarà probabilmente finirà in ".html", ".html" o ".php". Utilizzare un editor di testo semplice come pico su OSX o Notepad su Microsoft Windows.

2 Scorrere verso il basso la tabella --- il blocco di codice che inizia con "<table>" e termina con "</ table>". All'interno di questa tabella, cercare le singole celle che si desidera allineare. Ogni cella inizierà con "<td>" e terminare con "</ td>"; se si desidera utilizzare i CSS per lo stile delle celle, si dovrà inserire una riga di codice nella parte "<td>" della cellula.

3 Sostituire l'attuale "<td>" tag con la seguente riga: "<td style =" border: 1px solid nero; vertical-align: bottom; margin-bottom: 0px; padding-bottom: 0px; ">". Questo forzerà il testo nella cella da visualizzare in fondo, non importa quanto grande la cellula è o come la pagina viene ridimensionata.

Consigli e avvertenze

  • Se è necessario allineare più celle, è inefficiente e dispendioso di copiare e incollare lo stesso codice CSS. Invece, aggiungere la seguente riga tra la "<head>" e "</ head>" parti di codice HTML: "<style type =" text / css "> .bottomalign {vertical-align: bottom; margin-bottom: 0px; padding-bottom: 0px;} </ style> ". Poi, basta aggiungere "class = 'bottomalign'" a qualsiasi <td> in cui si desidera il testo attaccata al fondo, in modo che assomiglia a questo: "<td class = 'bottomalign'>".