Thursday, October 6, 2022

html List attributes tag


List Tag


Html List Tag


Lists Tag



List is a method that HTML offers for specifying any information or data in list style on web page. All lists can contain one or more heading or text. In a web page, list items like headings or any text starts with <li> and ends with </li>. But before writing any list item, it must to specify the list type. There are three types of lists you can use.

A list is a record of short pieces of related information or used to display the data or any information on web pages.
The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ), or a menu ( <menu> ). In menus and unordered lists, list items are usually. 



Three Types of Lists 

1) Unordered List  <ul>
2) Ordered List <ol>
3)Definition List <dl>


1) Unordered List


Unordered List <ul>: This will list items using plain bullets. An unordered list is a collection of elated items that have no special order or sequence. This list is created by using <ul> tag and ends with </ul> tag. Each item in the list is marked with a bullet. You can use type attribute for <ul> tag.


<ul type="square">

<ul type="disc">

<ul type="circle">

Program 

<!Doctype html>
<HTML>
<body>
<h1>  Unordered List</h1>
<ul>
<li>CPU Register</li>
 <li>Cache Memory</li>
<li>Primary Memory</li>
</ul>
<ul type="circle"> 
<li>Hard disk</li>
<li>CD/DVD</li> 
<li>Pend Drive</li>
</ul>
type="square">
<li>RAM</li>
<li>SRAM</li>
<li>DRAM</li>
</body>
</html>


Unordered List Output



Unordered List tag



2) Ordered List


This will use different schemes of numbers to list your items. If you are required to put your items in a numbered list then HTML ordered list will be used. This list is created by using <ol> tag and ends with </ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li> and ends with </li>

Following are the possible options

<ol type="1"> - Default-Case Numbers. 
<ol type="I"> - Upper-Case Roman Numbers.
<ol type="i"> - Lower Case Numbers.
<ol type ="a"> - Lower case Letters.
<ok type= "A"> - Lower Case Letters.


Program 

<! Doctype html>
<HTML>
<body>
<h1> Ordered List</h1>
<ol type="1" start="1">
<li>Water</li>
<li>Food</li>
<li>Water</li>
</ol>
<ol type="A" start="5">
 <li>Students</li>
<li>sanskar</li>
<li>Education</li>
</ol>
<ol type="I" start="5">
<li>Technology</li>
<li>Science</li>
<li>Maths</li>
</0l>
</body>
</html>


Ordered List Output


Ordered List tag

3) Definition  list


Definition List <dl> HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Program 

<!DOCTYPE html>
<html>
<head>
<title> Definition List</title>
</head>
 <body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</d1>
</body>
</html>


Definition List Output


Definition list Tag


Visit This Link
To Your extra information 





Wednesday, October 5, 2022

HTML Table Attribute in html

 

     Table Tag

                                       Attributes 


Html table tag



1) Rowspan Tag 

The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row.


Example

program 

<html>

<body>

<h1>Example of TD Rowspan attribute</h1> <table border="1">

<tr>
<th>Student</th>
<th>Fees Amount</th>
<th>Course</th>
</tr>
<tr>
<td>Manish</td>
<td>700</td>
<td rowspan="2">Java</td>
</tr> <tr>
<td>Puneet</td> <td>800</td>
</tr>
</table>

</body>

</html>

 

Rowspan Tag output

TD Rowspan attribute

2] HTML <td> Colspan Attribute.


Question :-


1] What is the colspan tag in HTML ?
2] What is colspan and rowspan ? 

Information :-

The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column. It provides the same functionality as merge cell in a spreadsheet program like Excel.

 

Example

<html>
<body>
<h1>Example of TD colspan attribute</h1> <table border="1">
<tr> <th colspan="2">Student Fees detail</th></tr>
<tr>
<th>Student</th>
<th>Fees Amount</th>
</tr>
<tr>
<td>Manish</td>
<td>1000</td>
</tr>
<tr>
<td>Puneet</td>
<td>2000</td>
</tr>
<tr> <td colspan="2">Total: 3000</td>
</tr>
</table>
</body>
</html>


Colspan Tag output

TD colspan Attribute

3)  Alignment Tag 

The HTML <td> valign Attribute is used to specify the vertical alignment of text content in a cell. Attribute Value top - It sets the content to top-align. middle -It sets the content to middle-align. Bottom - It sets the content to bottom-align.

1) Example

<! Doctype html>

<html>
<body>
<table  height="300" width="500" Border="2" Bordercolor="red"> 

<caption> Use of Verticle Alignment Attribute of Table</caption> 
<tr>

<td valign="Top">Top Align content</td>
<td valign="Center">Center Align content
</td>
 <td valign="Bottom">Bottom Align content</td> 
</tr>
</table>
</body>
</html>

 Alignment  OUTPUT


Verticle Alignment Tag



2) Example

<! Doctype html>
<html>
<body>
<table bgcolor="yellow" height="300" width="500" Border="2" Bordercolor="red"> 

<caption> Use of Verticle Alignment Attribute of Table</caption> 
<tr>

<td valign="Top">Top Align content
</td>


<td valign="Center">Center Align content
</td>

 <td valign="Bottom">Bottom Align content
</td> 

</tr>
</table>
</body>
</html

Question :- 

1]  How to align text in top HTML?
2] How to align text in center HTML?
3] How to align text in Bottom HTML?


Alignment OUTPUT




Verticle Alignment Tag




Related Post


html table program
css border bottom property
html tag Attributes
html Tag attributes
meta attribute html


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