More Notes On Tables

More Notes On Tables!

Table Background

You can set table background using one of the following two ways:

bgcolor attribute - You can set background color for whole table or just for one cell.

background attribute - You can set background image for whole table or just for one cell.

Also you can set the border color using the bordercolor attribute.

<table border="1" bordercolor="green" bgcolor="yellow">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan="2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan="3">Row 3 Cell 1</td>

</tr>

</table>

Here is an example of using background attribute. Here we will use an image available in images directory (file path).

<table border="1" bordercolor="green" background="/storage/emulated/0/Xender/Quotes/Adamx Quotes 4.jpg">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan="2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan="3">Row 3 Cell 1</td>

</tr>

</table>

Table Width And Height

You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area. For example;

<table border="1" width="400" height="150">

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. 

<table border="1" width="100%">

<caption>This is the caption</caption>

<tr>

<td>row 1, column 1</td>

<td>row 1, column 2</td>

</tr>

<tr>

<td>row 2, column 1</td>

<td>row 2, column 2</td>

</tr>

</table>

Free Classes Are Still On Going... Tell Your Friends About Us So They Can Get Added To One Of Our Numerous Group Chats. Contact Us At adamxelminence@gmail.com or WhatsApp 07059032984