Showing posts with label html table attribute list. Show all posts
Showing posts with label html table attribute list. Show all posts

Sunday, October 2, 2022

HTML Table Attribute

HTML Tag



Html table tag



 1) Cell width or column width Tag


The <td>width can be set either as an absolute value in pixel, or as in percentage (%)

Program 


<! doctype html>

<html>

<body>

<table border= 1 Width= 400>

<tr>

<td width=30%>

cell width is 30%

</td>

<td width = 70%>

cell width is 70% 

</td></tr>

</table>

</body>

</html>


 Cell width or column width output


Cell width and column width


2) TR Tag 

HTML table

TR(<tr></tr> tag ) stands for Table Row and used to insert rows in the table. Data in html tables are inserted into rows. The basic building blocks of an html  table is the table row. A table row doesn't contain any data directly. the <tr> tag defines a row in a html table and <tr> element contains one or more <th> or <td> element . These <th> and <td> contains the table date.


Organizing Table Rows

Simple tables often consist of a parent <table> element and some table rows. 

<thead> use as a parent container for the row that contains table headings.

<tfoot> use as a parent container for one or more rows that contain summary data about the data in  each table column.

<tbody> use as a parent container for the rows  of data presented in a table.


Attribute 

1) <tr align =""> sets the horizontal alignment for the contents of each <td> element in a table row.

2) <tr valign =""> sets the vertical alignment of all content in a table row.

3) <tr bgcolor="">sets the background color for a single table row in an html.

4) <tr background="">sets the URL of a file to be used as a background images for a table row.

5) <tr bordercolor=""> sets the border color for all inside border of a table row.

Program 

<! Doctype html>
<html>
<body>
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
</body>
</html>
 

TD Tag output



Tr Tag




 3) TH Tag

Table heading can be defined using <th> tag.

We use this tag  when we need to write some heading text in table column, so  it replace the <td> tag  with <th>. Normally  you will put your top row as table heading as shown below, so you use <th> element in first row. Heading which are defined in <th> tag are centered align align and bold by default.

 

Program 

<! Doctype html>

<html>

<table border= 2>

<tr>

<th>A </th>

<th>Heading</th>

<th>Row</th></th>

<tr>

<td>The first</td>

<td>row of </td>

<td>table data</td></tr>

</tr>

<td>the second</td>

<td>row of</td>

<td>table date</td>

</td></table>

</html>


TH Tag output

Th Tag output


4) TD Tag

The <td> tag defines a standard cell or column in an html table. This tag must be nested inside a <tr> tag. The information contained in this element is left- aligned by default. We can say that column is necessary for the completion of table in html. There is a one column either <td> or <th> is must even for single row.


Program 

<! Doctype html>

<html>

<body>

<table>

  <tr>

    <td>Cell A</td>

    <td>Cell B</td>

  </tr>

  <tr>

    <td>Cell C</td>

    <td>Cell D</td>

  </tr>

</table>

</body>

</htm>


TD Tag output


TD Tag




Related Post