Professional Documents
Culture Documents
Computer 10 Q4 Week 1
Computer 10 Q4 Week 1
FOURTH QUARTER
WEEK 1
HTML TABLES
HTML tables allow web developers to arrange data into rows and columns.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each
table data/cell is defined with a <td> tag.
Example
table, th, td {
border: 1px solid black;
}
Remember to define borders for both the table and the table cells.
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Table - Add Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without
padding.
Example
th, td {
padding: 15px;
}
Example
th {
text-align: left;
}
Example
table {
border-spacing: 5px;
}
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>