Scribd
Upload
8 views12 pages

Tables Attributes - Notes 1 Lyst5403

The document provides an overview of HTML front-end technologies, focusing on creating tables, lists, and hyperlinks. It explains the use of attributes like colspan and rowspan for tables, as well as the different types of lists in HTML, including unordered, ordered, and definition lists. Additionally, it covers the creation of hyperlinks and hypermedia, with examples demonstrating each concept.

Uploaded by

policharlagurukishor1431
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views12 pages

Tables Attributes - Notes 1 Lyst5403

The document provides an overview of HTML front-end technologies, focusing on creating tables, lists, and hyperlinks. It explains the use of attributes like colspan and rowspan for tables, as well as the different types of lists in HTML, including unordered, ordered, and definition lists. Additionally, it covers the creation of hyperlinks and hypermedia, with examples demonstrating each concept.

Uploaded by

policharlagurukishor1431
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML

Front End Technologies


– Day 4
Agenda
▪ Table’s contd…
▪ Lists
▪ Hyperlink

Tables Contd…
We are aware of how to represent a data in tabular format. Now
let us take various scenarios and try to create different forms of
tables
Example: Create a table in the following format
Name Skills
James C Java HTML
Guido C++ Python PHP

We can see the above format, where “Skills” is the combined


heading for three columns. Let us see how to get the above
mentioned table and the respective tags to be used

Front End Technologies HTML TapAcademy


HTML

Output:

Certainly we are missing the key point of heading, i.e. column


span of “Skills” is 3 (1-3). By adding the respective tag
attribute colspan we can get the desired format.

The colspan attribute defines the number of columns a cell


should span.

Front End Technologies HTML TapAcademy


HTML

Output:

Now we have the table as expected. By adding the respective


colspan tag attribute.
Example: Represent the same table with borders.

Name Skills
James C Java HTML
Guido C++ Python PHP

Front End Technologies HTML TapAcademy


HTML

Output:

We can definitely change the thickness of border by changing


the values. You can give a try
Example: Create the table in following format

Name Companies
Sun Microsystems
James Oracle
Liquid Robotics
Google
Guido Dropbox
Microsoft

Front End Technologies HTML TapAcademy


HTML

Output:

The rowspan attribute specifies the number of rows a cell


should span. The rowspan attribute can be used on the
following elements: <td> and <th>

Front End Technologies HTML TapAcademy


HTML

Example: Create a table with following format which


includes both rowspan and colspan
Group-1 Group-2
Team-1 Team-2 Points Team-1 Team-2 Points
Anthony JackFrags 5 5 Lirik Summit 5 4
DrDisRespect Ninja 5 4 Shroud Technosh 4 2
Rohit Rakshit 3 5 Jiffy Somanna 2 3
Kalesi John Snow 3 5 Bran Arya 4 3

Front End Technologies HTML TapAcademy


HTML

Output:

Lists
In HTML we also have list type of data representation. HTML lists are
used to present list of information in well-formed and semantic way.
There are three different types of list in HTML and each one has a
specific purpose and meaning.
• Unordered list - Used to create a list of related items, in no particular
order.
• Ordered list - Used to create a list of related items, in a specific
order.
• Definition list – HTML also supports description lists. A description
list is a list of terms, with a description of each term.

Let us explore each type of lists by taking the following examples

Example: List out the ingredients of coffee (order of ingredients does


not matter)

Front End Technologies HTML TapAcademy


HTML

Output:

As we can see from the above output, order does not matter the items
to prepare coffee can be in any order, but the steps to prepare matter.

Example: Step by step procedure to prepare coffee.

Output:

Front End Technologies HTML TapAcademy


HTML

<ul> - Defines an unordered list.


<li> - Defines a list item.
<ol> - Defines an ordered list.

Example: Create a list of few Web Development terminologies and


their definition.

Output:

Front End Technologies HTML TapAcademy


HTML

<dl> - Defines a description list.


<dt> - Defines a term/name in a description list.
<dd> - Defines a description/value of a term in a description list.

Hyperlink
Links are found in nearly all web pages. Links allow users to click their
way from page to page. In every webpage there are certainwords or
section of content which on clicked on to directs you to a website.
These are called the hypertext. Hypertext is a text which contains link
to other texts. These texts are given links. Let us consider an example
and get more clarity
Example: To create a hypertext and link to website

Hypertext Hyperlink

Output:

Certainly after clicking on to the hypertext, it will redirect to the link


provided.

<a> - Defines a Hyperlink.

Front End Technologies HTML TapAcademy


HTML

Example: To create a hypermedia

Output:

Certainly the image is linked to the respective website you can try by
yourself and cross verify.
Example: Create the following table

• Java
1. Core Java
2. Advanced Java
3. J2EE
• Python
1. Core Python
2. Advanced Python
• C#
1. C# Core
2. .NET MVC

Front End Technologies HTML TapAcademy


HTML

Output:

Great! We now know how to create various types of list data.

Front End Technologies HTML TapAcademy

You might also like