Scribd
Upload
50 views

List and Tables in HTML

HTML was invented by Tim Berners Lee in 1991 to create web pages. It uses tags to structure and present content, while CSS is used to design web pages. Some key HTML tags are <html>, <head>, <title>, <body>, <h1-6> for headings, <p> for paragraphs, and <ul>, <ol>, <li> for unordered and ordered lists. Tables are used to present tabular data and are defined with <table>, <tr>, <th>, and <td> tags. CSS can be used to style tables by modifying border properties like width, style, and color.

Uploaded by

sarita kumari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
50 views

List and Tables in HTML

HTML was invented by Tim Berners Lee in 1991 to create web pages. It uses tags to structure and present content, while CSS is used to design web pages. Some key HTML tags are <html>, <head>, <title>, <body>, <h1-6> for headings, <p> for paragraphs, and <ul>, <ol>, <li> for unordered and ordered lists. Tables are used to present tabular data and are defined with <table>, <tr>, <th>, and <td> tags. CSS can be used to style tables by modifying border properties like width, style, and color.

Uploaded by

sarita kumari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

List and Tables

in
HTML
Introduction of HTML :
● HTML : Hyper Text Markup Language
● HTML was invented by Tim Berners Lee in 1991.
● HTML is used for the creation of web page whereas CSS
(Cascading Style Sheet) is used for designing of the web page.
● Hypertext : a piece of text that has a special feature of linking
one webpage to another web page.
● Markup Language : Language which uses “tag” to markup a
text document which instructs the browser how to display an
object on the webpage .
Basic structure of HTML document :
<html>
<head>
<title> __________ </title>
</head>
<body>
____________
____________
</body>
</html>
Tags in HTML :
1. Tags are the basic building block of a webpage which given instruction to
the web browser about how the content would be visible on the screen .
2. They are written inside angle bracket < > which is only understood by the
web browser .
3. Tags do not appear on the screen . They only affect the display of content.
4. Tags are not case sensitive. It means <html> and <HTML> are same .
5. There are two types of tags:
a. Container tag : It has both ON and OFF tag. Eg - head tag , body tag,
paragraph tag , etc.
b. Empty tag : It has only ON tag . Eg- hr tag , br tag , etc .
Basic tags in HTML :
1. <html> - also called as root tag
2. <head> - contains head portion of document
3. <title> - displays title on the title bar of web page
4. <body> - container for all the visible content
5. heading tags - <h1> , <h2> , <h3> , <h4> , <h5> , <h6>
6. <p> - to display a long piece of text on web page
7. <br> - used to break line
8. <hr> - used to draw horizontal ruler
9. <b> - makes the text bold
10. <i> - makes the text italic
11. <u> - puts an underline below the text
12. <style> - used to define CSS codes
List
in
HTML
List in HTML :
● List is the most efficient way of presenting information in
a precise manner.
● It helps in making important points stand-out more
clearly which grabs a website visitor’s attention .
● List items are written between <li> and </li> tag .
● Basic type of lists in HTML :
○ Ordered list
○ Unordered list
1. Unordered list
● An unordered list is used when the list items are not to
be displayed in any particular sequence .
● The list begins and ends with <ul> and </ul> tags
respectively .
● <ul> tag indents each item in the list and add a bullet
against each of them .
● It is also called as bulleted list .
<html> <ul>
<head> <li> Pen </li>
<title> unordered list <li> Pencil </li>
example <li> Scale </li>
</title> <li> Eraser </li>
</head> </ul>
<body> </body>
<h1> This is an example </html>
of unordered list .
</h1>
2. Ordered list
● An ordered list is used to display the list of items in a
specific order .
● The list begins and ends with <ol> and </ol> tags
respectively .
● <ol> tag indents each item in the list and add a number
against each of them .
● It is also called as numbered list .
● By default, ordered list starts with number 1.
<html> <ol>
<head> <li> Pen </li>
<title> ordered list <li> Pencil </li>
example <li> Scale </li>
</title> <li> Eraser </li>
</head> </ol>
<body> </body>
<h1> This is an example </html>
of ordered list .
</h1>
Attributes in HTML :
● Attributes provide additional information about
elements.
● Attributes are always specified in the start/ON tag.
● Attributes usually come in name/value pairs like:
name="value"
● Eg : <body bgcolor = “cyan” >
Here bgcolor is an attribute of body tag .
Type Attribute of <ul> tag :
● This attribute specifies the type of bullets used to
mark items in the list .
● By default , it is disc for an unordered list.
● Syntax :
<ul type = “value”>
Where value = disc / square / circle
● Example :
<ul type= “square”>
Attributes of <ol> tag :
There are three basic attributes of <ol> tag .
1. Start attribute
2. Reversed attribute
3. Type attribute
Start Attribute of <ol> tag :
● An ordered list automatically starts with number
1.
● Start attribute helps us to start the numbering of
list with any different number also .
● For example :
<ol start = “50” >
Here the numbering of the list will start from 50 .
Reversed Attribute of <ol> tag :
● This attribute specifies that the list order should
be descending .
● For example :
<ol start = 10 reversed>
Here the numbering of list will be 10,9,8,7,6 …
Type Attribute of <ol> tag :
● This attribute specifies the type of numbering
used to mark items in the list .
● By default , it is 1 for an ordered list.
● Syntax :
<ol type = “value”>
Where value = 1 / A / a / I / i
● Example :
<ol type = “A”>
TABLES
In
HTML
Introducing Table :
● Tables are attractive and flexible way of
presenting information in the form of rows
and column.
● Advantages of tables
○ Present information or data in
comprehensive manner
○ Make comparative analysis of data.
○ Information is easier to read and quicker to
evaluate.
S. NO. NAME GRADES

1 NEHA A+

2 SIKHA A

3 RIYA B
Tags used in table are as follows:-
● <TABLE> - The <TABLE> tag defines an HTML table, it is a container tag and
needs to be closed
Syntax- <TABLE> </TABLE>
● <TH> - it stands for table heading, fonts appear bold when used with <TH>
tag.
Syntax - <TH> </TH>
● <TR> - it stands for table row , it is used to insert row into table.
Syntax - <TR> </TR>
● <TD> - it stands for table data, it is used to insert data into the cell
Syntax - <TD></TD>
● <CAPTION> - The <CAPTION> tag defines a table caption.,The <CAPTION>
tag must be inserted immediately after the <TABLE> tag.
Syntax - <CAPTION></CAPTION>
Structure of table in html
<html> <th>Savings</th>
<head> </tr>
<title>Structure of table <tr>
</title> <td>January</td>
</head> <td>100</td>
<body> </tr>
<h1>The caption <tr>
element</h1> <td>February</td>
<table border= “3”> <td>50</td>
<caption>Monthly </tr>
savings </table>
</caption> </body>
<tr> </html>
<th>Month</th>
Output
Attributes of table
1. Border - The HTML <table> border Attribute is used
to specify the border of a table. It sets the border
around the table cells.

Syntax:
<table border="value">
where value = whole number
Example :
<table border = “5”>
2. Colspan -

● The colspan attribute defines the number of


columns a table cell should span (merge/combine).
● The colspan attribute is used with <td> and <th>
Syntax :
<td colspan= “number” >
Example :
<td colspan= “2” >
<html> </tr>
<head> <tr>
<title> table attribute</title> <td>February</td>
</head> <td>80</td>
<body> </tr>
<h1>The td colspan <tr>
attribute</h1> <td colspan="2">Sum:
<table border=’5’> 180</td>
<tr> </tr>
<th>Month</th> </table>
<th>Savings</th> </body>
</tr> </html>
<tr>
<td>January</td>
<td>100</td>
3. Rowspan -
● The rowspan attribute specifies the number of
rows a cell should span.
● The rowspan attribute is used with <td> and
<th> .
Syntax :
<td rowspan= “number” >
Example :
<td rowspan= “2” >
<html> <tr>
<head> <td>January</td>
<title> rowspan </title> <td>100</td>
</head> <td rowspan="2"
<body> >50</td>
<h1>The td rowspan </tr>
attribute</h1> <tr>
<table border=5> <td>February</td>
<tr> <td>80</td>
<th>Month</th> </tr>
<th>Savings</th> </table>
<th>Savings for </body>
holiday!</th> </html>
</tr>
CSS fundamentals

orange ;
TABLE CSS PROPERTIES
1. border-width :
It helps in specifying the width of all the four borders of
an element.
Syntax : border-width:value;
Where value= thin|thick|medium|numeric value in
pixels
E.g. - table{border-width:thick;}
E.g. - table{border-width:3px;}
2. border-style : It sets the style of the border.
Syntax : border-style:value;
Where value=
none|hidden|dotted|solid|double|groove|ri
dge|inset|outset
E.g. - table{border-style:solid;}
3. border-color : This property allows us to
change the color of the border surrounding an
element.
Syntax : border-color:value;
Where value=colour name|colour value(rgb)
Eg - table{border-color:red;}
Eg - table{border-color:RGB(255,0,0);}
4. border : This property helps in specifying the
border width,border style, and border color of the
table all together.
Syntax: - border: value;
Where value= border-width border-style
border-color
Eg : table,td,th{border : 3px solid red ;}
5. Horizontal align (text-align ) :
● The text-align is used to set the horizontal
alignment of the text in a table.
● This is used with the <th> or <td> tag.
Syntax:- text-align : value;
where value=left|center|right|justify
Example :
th{text-align:right;}
6. vertical-align :
● The vertical-align properties are used to set the vertical
alignment of the text in a table.
● This is used with the <th> or <td> tag.
Syntax:-
vertical-align: value;
Where value=top|middle|bottom
Example :
th{vertical-align:bottom;}
<html> <tr>
<head><title>css with table</title> <th>Month</th>
<style> <th>Savings</th>
table,th,td </tr>
{ <tr>
border:5px solid blue; <td>January</td>
} <td>100</td>
th{text-align:center;} </tr>
td{vertical-align:middle} <tr>
</style> <td>February</td>
</head> <td>50</td>
<body> </tr>
<h1>The caption element</h1> </table>
<table height=”350” </body>
width=”350”> </html>
<caption>Monthly savings
</caption>
7. Hover
● This property is used to highlight the table cell,
row , or column with the specified color when we
hover our mouse over it.
● It is used with the <tr>,<th> or <td> tag.
Eg - tr:hover{background-color:cyan;}
8. border-spacing :
● This property is used to specify the distance between
the borders of the adjacent cells.
Syntax - border-spacing:value
Where value=horizontal spacing in px|cm vertical
spacing in px|cm
E.g. - table{border-spacing : 10px 20px;}
Note :If only one value is specified, it gets applied to
both the horizontal and vertical spacing
<html> <tr>
<head> <th>Month</th>
<title>css with table</title> <th>Savings</th>
<style> </tr>
table,th,td{border:5px solid blue;} <tr>
th{text-align:center;} <td>January</td>
td{vertical-align:middle} <td>100</td>
tr:hover{background-color:red;} </tr>
table{border-spacing:10px 20px;} <tr>
</style> <td>February</td>
</head> <td>50</td>
<body> </tr>
<table> </table>
<caption>Monthly savings </body>
</caption> </html>
9. border-collapse :
● This property specifies whether the table borders
are to be collapsed into single border or
detached.
Syntax: border-collapse:value
Where value =separate|collapse
E.g. - table{border-collapse:collapse;}
10. caption-side :
● It specifies the placement of a table caption
(heading of the table) .
Syntax: caption-side:value
Where value=top|bottom
E.g. - table{caption-side:bottom;}
11. Height and Width
● We can set the height and width of the table.
Syntax: height:value ;
width:value ;
Where value= length in px|cm|%
Eg - table { height:100px;
width:25%;}
12. Padding
● This property helps in specifying the space
between the border and the content in a table.
Syntax: padding:value;
Where value=top|right|left|bottom in px|cm|%
E.g. - padding:2px 3px 3px 2px - top(2px),right(3px),left(3px),bottom(2px)
padding:2px 3px 3px —-----top(2px),right and left(3px),bottom(3px)
padding: 2px 3px —----------top and bottom(2px), right and left(3px)
padding: 2px —----------------all four padding of 2px each
Example : table{padding:2px 4px;}
Basic CSS
properties
Basic CSS properties :
1. text-align
2. color
3. text-transform
4. text-shadow
5. font-family
6. font-size
7. font-style
8. font
1.text-align
● It is used to design the alignment of the text
in the webpage.
● Default text alignment is left
Syntax : text-align:value;
Where value => left | right | center | justify
Example: p {text-align:left;}
2. color
● It is used to define the colour of the text .
Syntax : color:value;
Where value=> color name | RGB code.
Example: p{color:red;}
3.text-transform
● It is used to transform the letters in a text into
uppercase,lowercase or capitalize first letter of each
word .
Syntax:text-transform:value;
Where value => uppercase | lowercase | capitalize | none

Example: p{text-transform:uppercase;}
4.text-shadow
● It adds shadow around the text.
Syntax : text-shadow:value;
Where value=> h-shadow v-shadow color
h-shadow - horizontal shadow ,v-shadow - vertical shadow
,color - colour of shadow
● Value of h-shadow and v-shadow will be in pixels
Example : p{text-shadow:2px 2px grey;}
5.font-family
● It defines the available list of fonts (writing style )
to be used .
Syntax : font-family:value;
Where value => any font name
Example: p{font-family:times new roman;}
6.font-size
● It defines the size of text on the web page .
Syntax : font-size:value;
Where value can be any number in pixel or
percentage.
Example : p{font-size:35px;}
p{font-size:110%}
7.font-style
● It displays the text in normal, italic or oblique .
Syntax: font-style:value;
Where value => normal | italic | oblique
Example:
h2{font-style:normal;}
8.font
● It specifies various properties to set the appearance
of text on the webpage.
Syntax:
font: font-style font-size font-family;
Example :
p{font:italic 30px algerian;}

You might also like