Table-Tag
Table-Tag
Når et table-tag bliver skrevet, påbegyndes en tabel.
Det første man skal er at angive tykkelsen af kanten på tabellen.
<table border="5">
Test |
<table border="2">
Test |
Table forklarer altså at tabellen påbegyndes, mens at border bestemmer tykkelsen af kanten.
td-Tag
Td står for tabledata. Dette tag er selve indholdet i tabellen, idet det danner de vandrette rækker, og det er inde i dette tag, at man skal skrive teksten i ens tabel.
<td>test</td>
tr-Tag
Tr står for tablerow. Et tr-Tag definerer at man danner og skifter en række lodret.
<tr> <td>test</td> </tr>
th-Tag
Th står for tableheader. Tableheader bruges til at give ens tabel overskrifter
Eksempel af de tre tags samlet i et table tag:
<tr> <th>Test</th> </tr> <tr> <td>test</td> </tr>
Test |
---|
test |
Thead-, tfoot- og tbody-Tag
Thead- tfoot- og tbody-Tag, bruges til at yderligere kategorisere og ændre nogle indstillinger på ens tabel. Det vil altså sige at man med disse kommandoer, kan dele sin tabel op i 3 grupper, hvor man derefter kan ændre indstillinger for hver gruppe. Thead-Tag bruges som regel til at kategorisere det øverste af tabellen, overskrifter og lignende. Tbody-Tag bruges til at kategorisere selve indholdet, mens tfoot-Tag bruges til at kategorisere den nederste del af tabellen. Ved hjælp af CSS, kan man også bruge disse tags til at give grupperne forskellige egenskaber som farve.
Her er et eksempel, hvor det første som er gjort, er at angive nogle indstillinger til de tre tags, så de får farve. Dette er enklest at gøre ved hjælp af CSS.
<style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style> <table border="2"> <thead> <tr> <th>Test1</th> <th>Test2</th> </tr> </thead> <tbody> <tr> <td>Test11</td> <td>Test12</td> </tr> </tbody> <tfoot> <tr> <td>Test21</td> <td>Test22</td> </tr> </tfoot> </table>
Webdesign | |
---|---|
CSS | Placering - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown |
HTML | <b> - <br> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere |