Web
Technologies
(HTML)
Lecture # 6
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
HTML Tables and Lists: Structure, Attributes, and Styling, Slides of Web Programming and Technologies
A comprehensive guide on creating and styling html tables and lists. It covers the basics of html tables, including table structure, attributes, and cell formatting. Additionally, it explains the three types of html lists (ordered, unordered, and description) and their respective attributes. The document also demonstrates how to nest lists and use css to customize list item markers.
Typology: Slides
2022/2023
1 / 18
This page cannot be seen from the preview
Don't miss anything!
Related documents
Partial preview of the text
Download HTML Tables and Lists: Structure, Attributes, and Styling and more Slides Web Programming and Technologies in PDF only on Docsity!
Web
Technologies
(HTML)
Lecture # 6
Contents
■ HTML Tables
■ HTML Lists
Name Semester GPA
Ikram 4 3.4
Bilal 4 3.3
Attribute Value Description align left center right Not supported in HTML5. Specifies the alignment of a table according to surrounding text border 1 0 Not supported in HTML5. Adds a border around the table cellpadding pixels Not supported in HTML5. Specifies the space between the cell wall and the cell content cellspacing pixels Not supported in HTML5. Specifies the space between cells rules none rows cols all Not supported in HTML5. Specifies which parts of the inside borders that should be visible width pixels % Not supported in HTML5. Specifies the width of a table
Table Attributes
Element Attribute Value Description Align left right center justify char Not supported in HTML5. Aligns the content in a cell Valign top middle bottom baseline Not supported in HTML5. Vertical aligns the content in a cell Bgcolor rgb(x,x,x) #xxxxxx colorname Not supported in HTML5. Specifies the background color of a cell Colspan number Specifies the number of columns a cell should span Rowspan number Sets the number of rows a cell should span Height pixels % Not supported in HTML5. Sets the height of a cell Width pixels Not supported in HTML5.
Example
Name Semester GPA
Ikram 4 3.4
Bilal 4 3.3
Ordered HTML List ■ An ordered list starts with the tag. ■ (^) Each list item starts with the tag. ■ The list items will be marked with numbers by default. ■ (^) List items can contain new list, and other HTML elements, like images and links, etc.
OOP WEB Agile
Attributes
i. Type Attribute
The type attribute of the tag, defines
the type of the list item marker.
Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers
Unordered HTML List
■ An unordered list starts with the tag.
■ Each list item starts with the tag.
■ The list items will be marked with bullets
(small black circles) by default.
OOP WEB Agile
list-style-type property
■ The CSS list-style-type property is used
to define the style of the list item marker.
Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked
list-style-image Property ■ Specify an image as the list-item marker in a list.
OOP WEB Agile
HTML Description Lists ■ (^) A description list is a list of terms, with a description of each term. ■ (^) The tag defines the description list, the tag defines the term (name), and the tag describes each term.
OOP
- Object Oriented Programming WWW
- World Wide Web
OOP
- Object Oriented Programming WWW
- World Wide Web