Wednesday, August 10, 2022
Tuesday, August 2, 2022
List in HTML
LIST :- list that means bullet and Number. i.e. if we want to create a bullet style in the web page then we used the list tags
Types of List
👉Unordered List (Bullets):- An unordered List start with the tag <UL> and end with </UL>. Each list item start with the tags <li> Attribute and CSS\Style propertiess, which can be specified with <LI>
CSS list :- Specifies the type of the bullet.
Style Type:- List-style-type: circle, Square
Example
<ul style="list-style-type: circle"> <ul style="list-style-type: Square">
<li> Mouse <li> Mouse
<li> Key board <li> Key board
<li> Hard Disk <li> Hard Disk
</ul> </ul>
output output
⃝ Mouse ⃞ Mouse
⃝ Key board ⃞ Key board
⃝ Hard Disk ⃞ Hard Disk
coding
<html>
<body>
<Ul style="list-style-type: circle">
<li>Mouse
<li>Key board
<li> Hard Disk
</Ul>
</body>
</html>
👉 Ordered List (Numbering) :- An Ordered list start with the tag<OL> and end with </OL>. Each List item start with the tag <li> the attribute and css\style properties , which can be specified with <li> are
<ol style="list-style-type: decimal "start="1">
<ol style="list-style-type: lower-alpha">
<ol style="list-style-type: upper-alpha">
<ol style="list-style-type: upper-roman">
coding
<html>
<body>
<ol style="list-style-type: decimal start="1">
<li>Mouse
<li>Key board
<li> Hard Disk
</ol>
</body>
</html>
output of multiple list i.e order list and unoreded list
Monday, August 1, 2022
how to create tables in html
Tables
Introduction
A Table is a two dimensional matrix, consisting of rows and columns . Tables are intended for displaying data in columns on a web page. All Table related tags are included between <TABLE>...........</TABLE> Tags.
Each row of a table is described between the <TR>.....</TR> Tags.
Each Column of a table described between the <TD>.......</TD> tags.
Table row can be two types
👉Header Row :- A row that can span across column of a table is called the Header row. A header row can defined using the <TH>........</TH> tags. the content of a table header row is automatically centered and appears in boldface.
👉Data row :- Individual data cell placed in the horizontal plane creates a data row . there could be a single data cell (i.e. a single column table) or multiple data cells(i.e a multi column table)
The attributes that can be included in the <TABLE> tags are
👉 ALIGN :- Horizontal alignment is controlled by the the ALIGM attribute. it can be
set to left, right ,center, justify. this attributes should be used in CSS
👉 VLIGN :- Control the vertical alignment of the cell contents it accept the value TOP, MIDDLE or BOTTOM
👉 BORDER :- Control the border to be placed around the table. The
border thickness is specified in pixels.
eg. create a table 5 row and 3 column Program No 1
<html>
<title>Example of Tables </title>
<body>
<table border="8" width="100%">
<th>Name</th>
<th> class</th>
<th>roll</th>
<tr> <td>Siddhi</td>
<td>VI</td>
<td>15</td>< /tr>
<tr> <td>Sidhant</td>
<td>VI</td>
<td>16</td> </tr>
<tr><td>Aryan</td>
<td>VI</td>
<td>17</td></tr>
<tr> <td>Aayush</td>
<td>VI</td>
<td>18</td></tr>
</table>
</html>
Out put of Program no 1
eg. create a table and also used of rowspan and column span Program No 2
<html>
<title> </title>
<body>
use of row span and column span
<br><br>
<table border="2" width="50%" >
<tr>
<th rowspan="2">Name</th>
<th colspan="3">Marks</th>
</tr>
<tr>
<th>Visual Basic</th>
<th>fundametal of computer</th>
<th>Java</th>
</tr>
<tr>
<td>Siddhi</td>
<td>70</td>
<td>85</td>
<td>80</td>
</tr>
<tr>
<td>Sidhant</td>
<td>60</td>
<td>65</td>
<td>70</td>
</tr>
<tr>
<td>Himansu</td>
<td>70</td>
<td>55</td>
<td>80</td>
</tr>
</table>
</html>
Out put of Program no 2
<html>
<title> </title>
<body>
use of row span and column span
<br><br>
<table border="2" width="50%" bgcolor="abcd" >
<tr>
<th rowspan="2" bgcolor="yellow">Name</th>
<th colspan="3">Marks</th>
</tr>
<tr>
<th>Visual Basic</th>
<th>fundametal of computer</th>
<th>Java</th>
</tr>
<tr>
<td bgcolor ="blue">Siddhi</td>
<td>70</td>
<td>85</td>
<td>80</td>
</tr>
<tr>
<td>Sidhant</td>
<td>60</td>
<td>65</td>
<td>70</td>
</tr>
<tr>
<td>Himansu</td>
<td>70</td>
<td>55</td>
<td>80</td>
</tr>
</table>
</html>
Out put of Program no 3
Subscribe to:
Comments (Atom)