6 Tables Flashcards
Create a table
<table> to define start and end of table
<tr> to define table row
<th> for table heading
<td> for table data
<table>
<tr> <th></th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr>
<tr> <th scope="row">Tickets sold:</th> <td>120</td> <td>135</td> </tr>
<tr> <th scope="row">Total sales:</th> <td>$600</td> <td>$675</td> </tr>
</table>
Make a table data or table heading span multiple columns
colspan=”2” (for 2 cells)
colspan=”1” (for 1 cell. Basically regular)
Make a table data or table heading span multiple rows
rowspan attribute
Semantic for table head, body and bottom
Why have these?
<thead> (for top headings)
<tbody> ( for most of it)
<tfoot> (for bottom, sum, etc.)
Why?
if the list is really long, you can have the head rand foot always visible as your scroll
to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.
<thead> <tr> <th>Date</th> <th>Income</th> <th>Expenditure</th> </tr> </thead
Control the width of a table cell
width attribute within a <td> tag
but just use CSS now
control cell spacing and padding of a table in html
cellpadding and cellspacing attributes within the main <table> tag
( but just use CSS now)
control border size and background colour of a table with html
border and bgcolor tags within the main <table> tag
Semantics for whether the table heading is for a row or column
scope=”col”
scope=”row”
Style only a column
below the table element, create a col group
<colgroup>
<col>
<col style=”background-color: yellow”>
</colgroup>
What will this do if there are 4 columns?
<colgroup>
<col>
<col style=”background-color: yellow” span 2>
<col>
<col>
</colgroup>
the second and third column will be yellow
Create a table caption (for sighted and sight impared)
<table>
<caption>Dinosaurs in the Jurassic period</caption>
…
</table>
markup the exact
Set the headers attribute for each cell with the ids of it’s row and col headings
<thead>
<tr>
<th id="purchase">Purchase</th>
<th id="location">Location</th>
<th id="date">Date</th>
<th id="evaluation">Evaluation</th>
<th id="cost">Cost (€)</th>
</tr>
</thead>
<tbody>
<tr>
<th id="haircut">Haircut</th>
<td headers="location haircut">Hairdresser</td>
<td headers="date haircut">12/09</td>
<td headers="evaluation haircut">Great idea</td>
<td headers="cost haircut">30</td>
</tr>
Add a border to a column only
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
under the table element
border-collapse: collapse
Then under the col of colgroup
border etc.
What does border collapse (of a table) do?
The border-collapse property is used to specify the border model of a table. It specifies whether the borders of the table and its table cells should be “joined” or separated.
When borders are separate, the table and each of its table cells can have their own distinct borders, and there is space between them. You can control the amount of space between borders of adjacent table cells using the border-spacing property.
When borders are “collapsed”, adjacent table cells share borders, and the cells at the edges of the table share their borders with the borders of the table itself.
