Table-Tag

Fra HTX Arduino
(Omdirigeret fra Th-Tag)
Spring til navigation Spring til søgning

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>

Theadtfoottbody1.jpg

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