In HTML5 stilul, aspectul si pozitionarea tabelelor httml se face cu CSS.
- Modul de creare a tabelelor in html e prezentat in tutorialul: Creare tabele HTML.
Tag-ul <style> din exemplele prezentate aici se adauga in zona <head> din pagina.
border
.<style> table, th, td { border: 1px solid #000; } </style> <table> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td> </tr> <tr> <td>linia 3- coloana 1</td> <td>linia 3- coloana 2</td> </tr> </table>
border-collapse: collapse;
la tabel.<style> table { border-collapse: collapse; } table, th, td { border: 1px solid #000; } </style> <table> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td> </tr> <tr> <td>linia 3- coloana 1</td> <td>linia 3- coloana 2</td> </tr> </table>
width
respectiv height
.<style> table { border-collapse: collapse; width: 95%; } th { height: 40px; } table, th, td { border: 1px solid #000; } </style> <table> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td> </tr> <tr> <td>linia 3- coloana 1</td> <td>linia 3- coloana 2</td> </tr> </table>
text-align
(poate lua valorile: left, right, center).vertical-align
(poate lua valorile: top, bottom, middle).
Pozitionarea tabelului pe mijloc se face aplicand valoarea "auto" la marginile stanga si dreapta la tabel: margin:5px auto;
<style> table { border-collapse: collapse; margin:5px auto; width: 70%; } table, th, td { border: 1px solid #000; } th { text-align: left; } td { height: 45px; vertical-align: bottom; } </style> <table> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td> </tr> <tr> <td>linia 3- coloana 1</td> <td>linia 3- coloana 2</td> </tr> </table>
border-spacing
aplicata la tabel.padding
aplicata la <th> si <td>.<style> table { border-spacing:10px; margin:5px auto; width: 80%; } table, th, td { border: 1px solid #000; } th, td { padding: 8px; } </style> <table> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td> </tr> <tr> <td>linia 3- coloana 1</td> <td>linia 3- coloana 2</td> </tr> </table>
background
. Aceasta poate fi aplicata la <table>, <tr>, <th> si <td>.<style> table { background: #a8a9e0; margin:5px auto; width: 290px; } table, th, td { border: 1px solid #000; } th { background: #4bac40; color: #fff; } td { background: #fff; } </style> <table> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td> </tr> <tr> <td>linia 3- coloana 1</td> <td>linia 3- coloana 2</td> </tr> </table>
nth-child()
la <tr>.hover
.<style> table { border-collapse: collapse; margin:5px auto; width: 290px; } table, th, td { border: 1px solid #000; } tr:nth-child(even){ background: #efefef; } tr:hover { background: #b8d8b8; } th { background: #bbbbf0; } </style> <table> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td> </tr> <tr> <td>linia 3- coloana 1</td> <td>linia 3- coloana 2</td> </tr> <tr> <td>linia 4- coloana 1</td> <td>linia 4- coloana 2</td> </tr> </table>
<input type="text" name="name1" required="required" />
#some_id:hover { transform: scale(2, 1.5); -ms-transform: scale(2, 1.5); /* IE 9 */ -moz-transform: scale(2, 1.5); /* Firefox */ }
var rightnow = new Date(); var day = rightnow.getDate(); alert(day);
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) { echo "Fisierul a fost incarcat"; }
In Bucharest it`s raining cats and dogs. - In Bucuresti ploua cu galeata.
En Madrid está lloviendo a cántaros. - In Madrid ploua cu galeata.