Scribd
Upload
17 views17 pages

3.HTML Tables

Uploaded by

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

3.HTML Tables

Uploaded by

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

HTML TABLES

What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating
Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the
content
• HTML elements label pieces of content such as "this is
a heading", "this is a paragraph", "this is a link", etc.
INTRODUCTION

The Hyper Text Markup Language or


HTML is the standard markup
language for documents designed to
be displayed in a web browser. It
defines the meaning and structure of
web content. It is often assisted by
technologies such as Cascading
Style Sheets and scripting
languages such as JavaScript.
What is a Table?

A table is a grid organized into columns and


rows, much like a spreadsheet. An example
table is shown below. This table consists of
sixteen cells organized into rows and
columns. But before beginning to use tables
in website design, we should consider the role
that they fill. Working with tables in HTML5
has become more powerful due to the new
HTML5 table tags and other elements
available in HTML5
<html><style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr><tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To understand the example better, we have
added borders to the table.</p>
</body>
</html>
Output
CONCEPTS of tables
Table Headers
Table Cells
<td> & </td> <th> & </th>

Table Rows Table Caption


<tr> & </TR> <caption>
HTML Table Tags
HTML Headings

CODE:
Output:
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>
HTML List
Unordered HTML List

Code:-
Output:-
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
Ordered HTML List

Code:- Output:-
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
OTHER CONCEPTS

HTML HTML5
It didn’t support audio It supports audio and
and video without the use video controls with the use
of flash player support. of <audio> and <video>
tags
PROGRAMMING TIMELINE
Jupiter is the biggest Neptune is the farthest
planet of them all planet from the Sun

iOS HTML5

1991 2007 2008 2014

Python Android
Mercury is the closest Saturn is composed of
planet to the Sun hydrogen and helium
EXERCISE

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas"
width="250" height="25"
style="border:4px solid #00ffc5;">
</canvas>

</body>
</html>
ASSIGNMENT

What language is
used to render 2D
graphics in
HTML5?

___
CREDITS: This presentation template was created by
Slidesgo, incluiding icons by Flaticon, and
infographics & images by Freepik.

You might also like