Tables in Web Page
If we wanna create a table on our web page. How is that possible to create columns and rows correctly.
For the table, we have to understand three tags of HTML Table, TR, TD. Table tag used as the parent tag of TR tag and TD tag. TR tag stands for Table Row. TD tag stands for Table Data.
we need to use Table tag for creating a table on web pages. There is a problem with each table having rows and columns. so we need to define rows of a table using TR tag used inside TABLE tag also define columns of a row using TD tag inside TR tag. The number of TD tags defines the number of columns in a particular row. same with TR tags define the numbers of rows in the table.
Table tag is the parent of the TR tag. TR tag parent of TD tag.
when we use Table tag it does not provide any border to the table on the webpage. So we need to use the border attribute of Table Tag and telling the web browser to put the border on the table and column/cells.
For example:
<BODY>
<TABLE border='1'>
<TR>
<TD>
Row 1 Column 1
</TD>
<TD>
Row 1 Column 2
</TD> 
Table on Web page
</TR>
<TR>
<TD>
Row 2 Column 1
</TD>
<TD>
Row 2 Column 2
</TD>
</TR>
</TABLE>
</BODY>
COLUMN HEADINGS
When we wanna provide the column heading. We have special Tags for the heading row of the table i.e. TH tag. TH tag is similar to TD tag. But the content written between the TH/THEAD tag looks different than TD tag content.
COL SPAN & ROW SPAN
Sometimes we need to merge two or more columns into one column. we need to understand the concept of colspan. colspan is the attribute of TD tag.
Syntax:-
<TD colspan='number of column merge'>
</TD>
Same as Rows, When we need to merge Rows into one Row. We use an attribute rowspan of TD tags. That particular cell merges two or more rows into a single row.
Syntax:-
<TR>
<TD rowspan='number_of _Row_merge into one row for particular
column'>
</TD>
...
...
...
</TR>
Example of Row & Col span along with Table heading:-
<BODY>
<TABLE Border='1'>
<TR>
<TH>
HEADING 1
</TH>
 |
| Output of Row & Col Span code |
</TH>
</TR>
<TR>
<TD>
ROW 1 COLUMN 1
</TD>
<TD>
ROW 1 COLUMN 2
</TD>
</TR>
<TR>
<TD colspan='2'>
ROW 2 COLUMN 1 & COLUMN 2 MERGE
INTO ONE USING
</TD>
</TR>
<TR>
<TD rowspan='2'>
Row 3 & row 4 column 1 using Row Span
</TD>
<TD>
Row 3 column 2
</TD>
</TR>
<TR>
<TD> ROW 4 column 2</td>
</TR>
</TABLE>
</BODY>
NOTE: You can build whole website through table tag. But it's not good way for practice and not good for doing job.
We you have any doubt let me know :)