140 likes | 415 Views
Tabulu veidošana HTML dokumentos. Informātika 11.klase. Tabulas pamattagi. < table > un </ table > Visi pārējie tagi, kas nosaka rindas un kolonnas, atrodas šī taga iekšienē. < tr > un </ tr > Definē tabulas rindas ( table row ) < td > un </ td >
E N D
Tabulu veidošana HTML dokumentos Informātika 11.klase
Tabulas pamattagi • <table> un </table> • Visi pārējie tagi, kas nosaka rindas un kolonnas, atrodas šī taga iekšienē. • <tr> un </tr> • Definē tabulas rindas (tablerow) • <td> un </td> • Definē tabulas šūnas jeb kolonnas (tabledate) • <caption> un </caption> • Pievieno tabulai virsrakstu jeb nosaukumu
Tabulas pamattagi • <table> un </table> • Šim tagam ir vairāki parametri: • border=“2” nosaka tabulas rāmja līniju biezumu. • bordercolor=#0000FF nosaka tabulas rāmja līniju krāsu. • cellspacing=“0” nosaka attālumu starp tabulas rāmi un šūnas rāmi horizontālā un vertikālā virzienā pikseļos. • cellpadding=“20” nosaka atstarpi starp tabulas rāmi un šūnu saturu horizontālā un vertikālā virzienā pikseļos.
Tabulas HTML kodu piemēri • <html> • <head> • <meta charset="windows-1257"> • <title>Tabula</title> • </head> • <body> • <table border="2" bordercolor=#0000FF> • <tr> • <td>Pirmā rinda un pirmā kolonna</td> • <td>Pirmā rinda un otrā kolonna</td> • </tr> • <tr> • <td>Otrā rinda un pirmā kolonna</td> • <td>Otrā rinda un otrā kolonna</td> • </tr> • </table> • </body> • </html>
Tabulas HTML kodu piemēri • <html> • <head> • <meta charset="windows-1257"> • <title>Tabula</title> • </head> • <body> • <table border="2" bordercolor=#0000FF cellspacing="20" cellpadding="10"> • <caption><h2>Veidojam tabulu</h2></caption> • <tr> • <td><fontcolor="red">Pirmā rinda un pirmā kolonna</td> • <td><b>Pirmā rinda un otrā kolonna</b></td> • </tr> • <tr> • <td><b><i>Otrā rinda un pirmā kolonna</i></b></td> • <td><b><i><fontcolor="blue" size="5">Otrā rinda un otrā kolonna</i></b></td> • </tr> • </table> • </body> • </html>
Tabulas HTML kodu piemēri • Attēla ievietošana tabulā. • <tr> • <td> • <imagesrc="C:/Users/Roberts/Desktop/HTML/tabulas/brousers/opera.jpg"> • <br> • <b><i>Otrā rinda un pirmā kolonna</i></b> • </td> • <td> • <imagesrc="C:/Users/Roberts/Desktop/HTML/tabulas/brousers/safari.jpg"> • <br> • <b><i><fontcolor="blue" size="5">Otrā rinda un otrā kolonna</i></b> • </td> • </tr>
Tabulas HTML kodu piemēri • <a href=“adrese”> un </a> • Saites piešķiršana tekstam. • <tr> • <td> • <imagesrc="C:/Users/Roberts/Desktop/HTML/tabulas/brousers/firefox_logo.jpg"> • <br> • <a href=“http://www.firefox.com” ><fontcolor="red">www.firefox.com</a> • </td> • <td> • <imagesrc="C:/Users/Roberts/Desktop/HTML/tabulas/brousers/IE_logo.jpg"> • <br><b>Pirmā rinda un otrā kolonna</b>< • /td> • </tr>
Tabulas HTML kodu piemēri • <a href=“adrese”> un </a> • Saites piešķiršana attēlam. • <tr> • <td> • <a href="http://www.opera.com"><imagesrc="C:/Users/Roberts/Desktop/HTML/tabulas/brousers/opera.jpg"></a> • <br><b><i>Otrā rinda un pirmā kolonna</i></b> • </td> • <td> • <imagesrc="C:/Users/Roberts/Desktop/HTML/tabulas/brousers/safari.jpg"> • <br><b><i><fontcolor="blue" size="5">Otrā rinda un otrā kolonna</i></b> • </td> • </tr>
Tabulas HTML kodu piemēri Tekstam un attēlam ir piešķirtas saites!