CSS-table: Forskelle mellem versioner
Bar (diskussion | bidrag) m 1 version importeret |
Bar (diskussion | bidrag) Ingen redigeringsopsummering |
||
| Linje 2: | Linje 2: | ||
<table border="1"> | <table border="1"> | ||
<tr> | <tr> | ||
<td>Række 1, celle 1</td> | <td>Række 1, celle 1</td> | ||
<td>Række 1, celle 2</td> | <td>Række 1, celle 2</td> | ||
</tr> | </tr> | ||
Nuværende version fra 28. okt. 2022, 10:21
Tables i HTML kode og CSS kode har forskellige egenskaber, men CSS har evnen til at være meget mere fleksibel. Hvor man i HTML kun kan lave
| Række 1, celle 1 | Række 1, celle 2 |
| Række 2, celle 1 | Række 2, celle 2 |
Dette får man frem ved hjælp af standard HTML kode
<table border="1"> <tr> <td>Række 1, celle 1</td> <td>Række 1, celle 2</td> </tr> <tr> <td>Række 2, celle 1</td> <td>Række 2, celle 2</td> </tr> </table>
Til gengæld kan man lave meget pænere tables med CSS-formattering, såsom
ved at skrive
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
I CSS fungerer "border" linjen ligesom den gør i HTML hvor at man skriver hvor mange pixels der skal være i borderen. Dog kan man nu også angive en farve, solid green i dette tilfælde. Den farve angivet der er den der fylder den øverste linje, ergo overskriften. Den farve der er angivet ved at skrive background-color:<Name of colour goes here>; er den baggrundsfarve der skal bruges i resten af cellerne som baggrundsfarve.
Tables bruges tit til at organisere information i form af tal eller andre ting der skal kategoriseres. I dette eksempel er det brugt til pænt at vise navnene på forskellige firmaer, navnene på deres ansatte og deres land.
| 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 |