Use of Lists and Tables in HTML
PrakritiDhang
761 views
28 slides
Jul 02, 2020
Slide 1 of 28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
About This Presentation
This is the second lesson of HTML and CSS. This presents how to use lists and table in HTML. The slide also describes tags of lists and tables. CSS properties are used to style tables.
Slide Content
HTML, CSS, and JavaScript Lesson 2 Prakriti Dhang 02-07-2020
Lists in HTML Ordered list, Unordered List, Description List
Tags in HTML List Tags Description < ol > Defines an ordered list < ul > Defines an unordered list <li> Defines list items <dl> Defines a description list < dt > Defines a name in a description list < dd > Describes the name in a description list
Type of Lists in HTML Ordered List Starts with the < ol > tag and each list item starts with the <li> tag. The list items is marked with numbers by default: Example: <ol> < li>HTML</ li> < li>CSS</ li> < li>JavaScript</ li> </ol> Unordered List An unordered list starts with the < ul > tag and each list item starts with the <li> tag. The list items is marked with bullets by default. Example: <ul > < li>HTML</ li> < li>CSS</ li> < li>JavaScript</ li> </ul>
Description List in HTML Is a list of terms, having a description for each name. Example: <!DOCTYPE html> <html> <body> < h3>A Description List</ h3> < dl> < dt >HTML</ dt > < dd >-Hypertext Markup Language</ dd > < dt >CSS</ dt > < dd >-Cascading Style Sheet</ dd > </dl> </body> </html> A Description List HTML -Hypertext Markup Language CSS -Cascading Style Sheet
Change the default item in Unordered list Style it by writing : list-style-type Defines the style of the list item marker There are 4 types of styling the list. Circle : Sets the list item marker to a circle. Disc : Sets the list item marker to a disc. This is the default style. Square : Sets the list item marker to a square None : Sets the list item marker to none. The list items will not be marked.
Example list-style-type : circle <!DOCTYPE html> <html> <body> < h3>Unordered List with Circle Bullets </ h3> < ul style=" list-style-type:circle ;"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ ul > </body> </html> Unordered List with Circle Bullets HTML CSS JavaScript
Example list-style-type: disc <!DOCTYPE html> <html> <body> < h3>Unordered List with Disc Bullets</ h3> < ul style=" list-style-type:dics ;"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ ul > </body> </html> Unordered List with Disc Bullets HTML CSS JavaScript
Example list-style-type:square <!DOCTYPE html> <html> <body> <h3>Unordered List with Square Bullets</h3> < ul style=" list-style-type:square ;"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ ul > </body> </html> Unordered List with S quareBullets HTML CSS JavaScript
Example list-style-type:none <!DOCTYPE html> <html> <body> <h3>Unordered List with N one Bullets </h3> < ul style=" list-style-type:none ;"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ ul > </body> </html> Unordered List with None Bullets HTML CSS JavaScript
Change the default item in O rdered list The type attribute in the < ol > tag, defines the type of item marker in the list. Type Description type=“1” The items in the list will be marked with numbers type=“A” The items in the list will be marked with uppercase letters type=“a” The items in the list will be marked with lowercase letters type=“I” The items in the list will be marked with uppercase roman number type=“ i ” The items in the list will be marked with lowercase roman number
Example Type=“1” <!DOCTYPE html> <html> <body> <h3>Ordered List with number (default)</h3> < ol type=“1"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ ol > </body> </html> Ordered List with number (default) HTML CSS JavaScript
Example type=“a” <!DOCTYPE html> <html> <body> <h3>Ordered List with Lowercase Letters</h3> < ol type=“a"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ ol > </body> </html> Ordered List with Lowercase Letters HTML CSS JavaScript
Example type=“A ” <!DOCTYPE html> <html> <body> <h3>Ordered List with Uppercase Letters</h3> < ol type="A"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ ol > </body> </html> Ordered List with Uppercase Letters HTML CSS JavaScript
Example type =“I” <!DOCTYPE html> <html> <body> < h3>Ordered List with Uppercase Roman Numbers</h3> < ol type =“I"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ ol > </body> </html> Ordered List with Uppercase Roman Numbers HTML CSS JavaScript
Example type=“ i ” <!DOCTYPE html> <html> <body> <h3>Ordered List with Lowercase Roman Numbers</h3> < ol type=“ i "> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ ol > </body> </html> Ordered List with Lowercase Roman Numbers HTML CSS JavaScript
Table in HTML Tags Description and Styling
Tags in HTML tables Tags Description <table> Defines a table < th > Defines table header. The elements inside are bold and centered < tr > Defines row of the table <td> Defines cell of the table <caption> Defines a caption < colgroup > Specifies a group of one or more columns in a table <col> Specifies column property < thead > The header content is grouped within the tag < tbody > The content of the body is grouped within the tag < tfoot > The footer content is grouped within the tag
Example <!DOCTYPE html> <html> <body> <h4>Basic HTML Table</h4> <table style="width:100%"> < tr > < th >Book Name</ th > < th >Author Name</ th > < th >Book Type</ th > </ tr > < tr > <td>Java: A Beginner's Guide</td> <td>Herbert Schildt </td> <td>Educational</td> </ tr > < tr > <td>HTML & CSS: Design and Build Web Sites</td> <td>Jon Duckett </td> <td>Educational</td> </ tr > < tr > <td>The Notebook</td> <td>Nicholas Sparks</td> <td>Novel</td> </ tr > </table> </body> </html> OUTPUT->
CSS property CSS property Description border Defines a border to the table border-collapse Defines a border to each cells of the table padding Add padding to the cells Text-align Align s text of the cell (left, right, center) Border-spacing Sets space in between the cells width Defines width of the table
Styling HTML tables with CSS table, th , td { border: 1px solid black ; border-collapse: collapse; } th , td { padding: 15px; } th { text-align: left; } table { border-spacing: 5px; }
Use of colspan attribute <!DOCTYPE html> <html> <head> <style> table, th , td { border: 1px solid black; border-collapse: collapse; } th , td { padding: 5px; text-align: left; } </style> </head> <body > <h4>Cell that spans two columns</h4> <table style="width:100%"> < tr > < th >Color Name</ th > < th colspan ="2">Color Shades</ th > </ tr > < tr > <td>Red</td> <td>Light Red</td> <td>Deep Red</td> </ tr > </table> </body> </html> OUTPUT->
Use of rowspan attribute <!DOCTYPE html> <html> <head> <style> table, th , td { border: 2px solid black ; } th , td { padding: 10px; text-align: left; } </style> </head> <body > <h4>Cell that spans more than one row</h4> <table style="width:100%"> < tr > < th >Color Name</ th > <td>Red</td> </ tr > < tr > < th rowspan ="2">Color Shades</ th > <td>Light Red</td> </ tr > < tr > <td>Deep Red</td> </ tr > </table > </body> </html> OUTPUT->
Specify id attribute to a table and style it <!DOCTYPE html> <html> <head> <style> table, th , td { border: 2px solid black; border-collapse: collapse; } th , td { padding: 10px; text-align: left; } #t01 { width: 100%; background-color: #ff3333 } </style> </head> <body> <h4>Use of id attribute for styling HTML tables</h4> <table style="width:100%"> < tr > < th >Color Name</ th > <td>Red</td> </ tr > < tr > < th rowspan ="2">Color Shades</ th > <td>Light Red</td> </ tr > < tr > <td>Deep Red</td> </ tr > </table> < br > <table id="t01"> < tr > < th >Color Name</ th > < th colspan ="2">Color Shades</ th > </ tr > < tr > <td>Red</td> <td>Light Red</td> <td>Deep Red</td> </ tr > </table> </body> </html>
OUTPUT->
Summary Lists in HTML: Ordered, Unordered, and description. T able in HTML Styled table with CSS property
Practice Create a page that shows shopping list. Use Ordered list, type roman numbers. In the same page use unordered list of type square to display list of books. In the same page, add a table showing address book of 5 people. Use colspan and row span attribute. Style the table accordingly.
Thank You
Tags
Categories
EducationDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 761
- Slides 28
- Age 1979 days
Related Slideshows
11
TLE-9-Prepare-Salad-and-Dressing.pptxkkk
MaAngelicaCanceran
32 views
12
LESSON 1 ABOUT MEDIA AND INFORMATION.pptx
JojitGueta
24 views
60
GRADE-8-AQUACULTURE-WEEKQ1.pdfdfawgwyrsewru
MaAngelicaCanceran
40 views
26
Feelings PP Game FOR CHILDREN IN ELEMENTARY SCHOOL.pptx
KaistaGlow
39 views
![Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx](https://slidepub.com/thumb/5828/284015828.jpg)
54
Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx
acecamero20
23 views
7
Jeopardy_Figures_of_Speech.pptxvdsvdsvsdvsd
acecamero20
24 views