In this section, we will learn to draw tables along with some attributes which are discussed earlier. The table below shows the list of tags available to create the table, which are used in the next code listsing.
| Tag | Description |
|---|---|
| table | beginning and end of table |
| tr | row of table |
| th | header cell |
| td | data cell |
| Attributes | |
| rowspan | number of rows to merge |
| colspan | number of columns to merge |
| border | width of border |
| cellpadding | width of whitespace between two bordernumber of columns to merge |
| cellspacing | width of whitespace within a border |
| bgcolor | background color |
| bordercolor | color of the border |
| width | width of table (numeric and %) |
| height | height of table (numeric) |
1 <!-- border - color, width and height -->
2 <table border="1" bordercolor="black" width="450" height="100">
3 <caption>Table 1 : Various tags of table</caption>
4 <tr bgcolor="red" > <!-- row -->
5 <th>Column 1</th> <!-- header -->
6 <th>Column 2</th>
7 <th>Column 3</th>
8 </tr>
9
10 <tr bgcolor="cyan"> <!-- background color -->
11 <td>Data 1</td> <!-- data -->
12 <td>Data 2</td>
13 <td>Data 3</td>
14 </tr>
15
16 <tr bgcolor="yellow"> <!-- row -->
17 <td colspan="2">New Data 1</td> <!-- column span -->
18 <td>New Data 2</td> <!-- data -->
19 </tr>
20 </table>
21
22
23
24 <!-- width in % -->
25 <table border="1" bordercolor="black" width="80%" height="100">
26 <caption> Table 2 : Width is 80%</caption>
27 <tr bgcolor="red" >
28 <th>Column 1</th>
29 <th>Column 2</th>
30 <th>Column 3</th>
31 </tr>
32
33 <tr bgcolor="cyan"> <!-- row -->
34 <td>Data 1</td> <!-- data -->
35 <td>Data 2</td>
36 <td>Data 3</td>
37 </tr>
38
39 </table>
40
© Copyright 2025 | FolkLight Studios