Html and CSS

Html Table Code and Their Commonly Used Attributes and , ,

HTML TABLES

An html table is a two dimensional matrix consisting of rows and columns. It is used to organize information in rows and columns. The rows and columns create displayed into cells. tables are also useful for arranging images and text on a page.

Amazon Purchase Links:

Top Gaming Computers

Best Laptops

Best Graphic Cards

Portable Hard Drives

Best Keyboards

Best High Quality PC Mic

Computer Accessories

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

<TABLE> Tag

The <Table> tag is used to mark the beginning of a table (or to create the  table structure). All html table related tags are included between the <Table> and </Table> tags.

Attributes Html Table:

The most important and commonly used attributes of <Table> tag are as follows:-

Align

It is used to specify the horizontal alignment of the table. It’s possible values are:

  • Left: it is used for left alignment
  • Right: it is used for right alignment.
  • Center: it is used for center alignment.

Valign

It is used to specify the vertical alignment of cell elements. Its possible values are:

  • Top: it is used for top alignment of the cell contents.
  • Bottom: it is used for bottom alignment of the cell contents.
  • Middle: it is used for displaying the contents at the middle of the cell.

BGColor

It is used to specify the background color within all table cells in the html table. You can use color name or

hexadecimal value for color.


Background

It is used to specify the graphic image as the background of the table.

Border

It is used to specify the thickness of the border around each html table cell. It is specified in pixels. If value 0 is

Specified then no border will be shown.

BorderColor

It is used to specify the color of the borders of the cells of the table. You can use color name or hexadecimal value.

BorderColorDark

It is used to specify the dark color around the html table cells.

BorderColorLight

It is used to specify the lighter color around the  table cells.

Width

It is used to specify the width of the html table. It can be given as number of pixet or as percentage of the

available screen width. If the width is not specified, the data cell is adjusted based on the cell data value.

CellPadding

It is used to specify the space (in number of pixels) between the edges of html table cells and their contents (data displayed in cells.)

Cellspacing

It is used to specify the space (in number of pixels) between adjacent cells of the table.

<CAPTION> Tag of Html Table

A html table is given a heading for describing the purpose of information stored in the table. Html table heading is called caption. The <Caption> tag is used after the <Table> tag for giving the heading of a table. The general syntax for specifying  table caption is as follows: –

<TABLE>

<CAPTION> Table Heading </CAPTION>

</TABLE>

Attributes of the html table caption:

The <Caption> tag has many attributes but “Align’ is the most commonly used attribute. It is used to specify the alignment/location of the caption of a html table. The possible values for this attribute and their description are as follows: –

Top: it is used to place the caption immediately above the table.

  • Bottom: it is used to place the caption below the table.
  • Left: it is used to place the caption left side of the  table.
  • Right: it is used to place the caption right side of the table.



<TR> Tag of html table:

TR stands for Html table Row. The <TR> tag is used to create a row of a  table. Most of the attributes of this tag are same as for <Table> tag. However, the attributes that are most commonly used for individual rows are as follows: –

Attribute of the <tr> tag of the html table:

Align

It is used for horizontal alignment of contents of the row cells. The possible values for this attribute are; ‘left’, ‘right and ‘center’.

Valign

It is used to specify the vertical alignment of row cells. Its possible values are: ‘top’, ‘bottom’, and ‘middle’.

BGColor

It is used to specify the background color of a row cells.

<TH> Tag of the html table:

TH stands for Table Heading. The <TH> tag is used to create the table cell for heading. A table heading cell can be used at the top of each column of the html table. The text for heading cell appears in bold face. You can apply other formatting such as italic and underline etc. using text formatting tags.

The <TH> tag contains many attributes. Most of the attributes are same as for <Table> tag. The most important and common attributes that can be applied on individual  table cell heading are as follows:

Attribute <th> tag of the  table:

Align

It is used for horizontal alignment of content of the heading cell. The possible values for this attribute are; left’, ‘right’ and ‘center’.

BGColor

It is used to specify the background color of the heading cell Background It is used to specify the graphic image as the background of the heading cell.

Valign

It is used to specify the vertical alignment of the heading cell Its possible values are: ‘top’, ‘bottom’, and ‘middle’.

ColSpan

It is used to divide a cell (heading cell) into more than one column.

RowSpan

It is used to divide a cell (heading cell) into more than one row.


<TD> Tag of the html table:

TD stands for Table Data. The <TD> tag is used to create data cell of the row. Please note that both <TD> and <TH> tags are applied between the <TR> and </TR> tags. The difference between <TH> and <TD> tags is as follows: –

  • <TH> tag is used to create cell of row for table cell heading, while <TD> tag is used to create cell of row for storing actual data.
  • Contents of heading cells appear as bold face, while contents of data cells appear as normal form.

Note: The attributes of <TD> tag are the same as for <TH> tag.

Example write html code to display records of two student into a table:

<html>
    <head> <title>Table Example 1</title>
    </head>
    <body>
    <table border=2 align=center>
    <caption>Students Records</caption>
    <tr align =left>
    <th> Roll_no</th>
    <th> Name</th>
    <th> Total marks</th>
    <th> Grade</th>
    </tr>
    <tr>
    <td>1</td>
    <td>khan</td>
    <td>500</td>
    <td>B</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Nazia</td>
    <td>850</td>
    <td>A+</td>
    </tr>
    </table>

    
    </body>
</html>

html table


Example write html code to display product list and product total amount:

<html>
    <head> <title>Table Example 2</title>
    </head>
    <body>
    <table border=2 align=center>
    <caption>Product List</caption>
    <tr align =center>
    <th> Item</th>
    <th> Quantity</th>
    <th>Price</th>
    <th> Extended</th>
    </tr>
    <tr>
    <td>Hard Disk</td>
    <td align= center>1</td>
    <td>500$</td>
    <td>400$</td>
    </tr>
    <tr>
    <td>Cd Drive</td>
    <td align= center>1</td>
    <td>200$</td>
    <td>500$</td>
    </tr>
    <tr>
    <tr>
    <td>Cds</td>
    <td align= center>10</td>
    <td>20$</td>
    <td>50$</td>
    </tr>
    <tr>
    <td colspan =3 align =right>
    <b>Total Amount</b></td>
    <td> <b> 950 $</b></td>
    </table>

    
    </body>
</html>

html table

Example writes html code for displaying weather station temperature, humidity information in html table:

<html>
    <head> <title>Table Example 3</title>
    </head>
    <body>
    <table border=2 align=center>
    <caption><b>Weather Station</b></caption>
    <tr align =center>
    <th rowspan = 2> Station</th>
    <th colspan= 2> Temperature</th>
    <th rowspan= 2>Humidity</th>
    <th rowspan = 2> Weather</th>
    </tr>
    <tr align =center>
    <th>Max</th><th> Min</th>
    </tr>
    
    <tr align = left>
    <td>USA</td>
    <td align= center>24</td>
    <td align= center>19</td>
    <td align=center>60%</td>
    <td>cloudy</td>
    </tr>
    <tr align = left>
    <td>Germany </td>
    <td align= center>5</td>
    <td align= center>-1</td>
    <td align=center>70%</td>
    <td>Rainy</td>
    </tr>
    </table>

    
    </body>
</html>

html table


Example write html code to display images inside the cells of the table:

<html>
    <head> <title>Table Example 4</title>
    </head>
    <body>
    <table border=2 align=center>
    <caption><b>landscape Images</b></caption>
    <tr align =center>
    <td> landscape 1</td>
    <td> landscape 2</td>
    </tr>
    <tr>
    <td> <img src ="test.jpg" width=200></img></td>
    <td> <img src ="test2.jpg" width=200></img></td>
    </tr>
    <tr align =center>
    <td> landscape 3</td>
    <td> landscape 3</td>
    </tr>
    <tr>
    <td> <img src ="test3.jpg" width=200></img></td>
    <td> <img src ="test4.jpg" width=200></img></td>
    </tr>
    
    </table>

    
    </body>
</html>

html table

Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button