How to Create Tables in HTML?
https://www.computersprofessor.com/2016/06/how-to-create-tables-in-html.html?m=0
Representing the data in the form
table is one of the traditions approach of the data management data is
usually organized in terms of rows and columns. Table is one of most useful
HTML constraint many of best design sites in the internet are around table.
To create a table it follow three
Create structure of the table using < table > tag
Syntax : -
----------------
----------------
</table>
Divide table into multiple rows
using < /tr> tag.
Syntax: < table>
< tr > -------------< /tr>
< tr > ------------- </tr>
< tr > ------------- </tr>
</table>
< tr>tag corresponds to a simgle of a given table. Data supplied within these tage are usually displayed in a particular row of a table < tr > tag may contain <th> and <td> tag select the row and insert data using < td > tag.
Syntax:-
< table >
< tr>
<th>
<th>
</tr>
<tr>
<td>
<td>
</tr>
<tr>
<td>
<td>
</tr>
</table>
<td> tag inserts data into each block of
the table.
<th>tag:- This tag is used to set the heading
of available columns. The major difference between < td> and <th> tags are that <th> tag makes the data “Bold” and places it at the centre of the table block. On the other hand <td> insert data into the
block in the normal font and its position depends on its attribute.
Attributes of <table> tag:-
Border:- It sets width of the border around
the table cells. The default value is “0” i.e.it displays the table with no
border.
Syntax:-
Bordercolor : It sets the color around table
cells. By default it colour is black.
Syntax:
bg
color:-
a)
for
table back ground:- To set color for table.
Syntax:-
b)
for
table row :- To give an individual color for each row.
Syntax:- < table>
< tr bgcolor= “……….”>
< / table >
c)
for
a single cell:- To give individual color for each cell.
Syntax:- < table>
< tr>
<td bgcolor =“…………”>
</tr>
< /table>
Background:-
Using this attribute the visualization of
the table can be further enhanced by setting an image (or) other graphics as
background to the table. It usually carries “URL” path corresponding to the
given image.
Align:- It changes the alignment of the
table in the browse window with the values “left , right and centre”, default
value is “left alignment”. It is usually performed horizontally. It also
aligns a row (or) heading or single cell in the table.
Eg:- < table align = “right”>
<th align = “right”>
Valign:-
It directs vertical
alignment of data in a table row (or) table heading (or) for table cell with
the values top, bottom and middle.
Height and width:-
These attributes
represent the size of the table in pixels by specifying height and width.
Cell
padding:-
It gives some amount
space in between cell border and content.
Cell spacing:-
It gives some amount space in
between cells of the table.
Row span:-
It combines two (or)
more cells in horizontal (or) row wise.
Cell span:-
It also merges two (or)
more cells in column wise.
Advanced table elements:-
Caption:-
This optional element provides a string which contains the content the table.
Eg: -
The rows in a table can be grouped
into one of the three divisions.
<thead > …………..</thead>
<tbody > ……..……</tbody>
<tfoot > …………….</tfoot >
This grouping is optional. When long
tables extends over more than one page. The information in < thead> and < tfoot > can be automatically repeated in each page.
Eg:
Columns within the table can be
logically grouped together .Each group of columns can be designed difficult
with which will be applied to all columns. A span indicates no of columns in
the group.
< col [span = “n”] [width= “n”] > ………………</col>
The attributes of individual columns
are set using the col elements.
< html>
< head >
< title> table < title>
< /head>
< body >
< h1> sample table < /h1>
< table >
< tr>
< th > first row < th>
< th > second row </th>
</tr >
<tr>
< td > Some text </th>
< td > Some other text < / td>
< /tr >
< /body >
< /html>
Out Put:
Eg: program for col span
<html>
< head >
< title> colspan< /title>
< /head>
< body >
< table border = “5”>
<tr>
<th> name < /th>
<th>telephone < 1th>
< th cdspan=”2”>telephone </th>
</tr>
<tr>
<td>sasi</td>
<td>9876543210 < /td>
<td> 9081726354 < /td>
<tr>
</table>
</body>
</html>
Out Put:
For row span:
< html >
< head >
< title > row span < /title>
< / head>
<body>
<table border = “5”>
<tr>
<th> Name </th>
<td>sai </td>
</tr>
<tr>
<th row span = “2”> telephone </th >
<td>9877777989</td>
</tr>
</table>
</body>
</html>
Out Put:
|