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>
<ul> <li>http://coursesweb.net/html/</li> <li>http://www.marplo.net/html/</li> </ul>
.some_class { display: list-item; }
var obj = { "courses": ["php", "javascript", "ajax"] }; var jsonstr = JSON.stringify(obj); alert(jsonstr); // {"courses":["php","javascript","ajax"]}
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>'; $dochtml = new DOMDocument(); $dochtml->loadHTML($strhtml); $elm = $dochtml->getElementById("dv1"); echo $elm->nodeValue; // CoursesWeb.net
I`m living here. - Traiesc /Locuiesc aici.
Estoy viviendo aquĆ. - Traiesc /Locuiesc aici.