Scribd
Upload
2 views

HTML Tables and Lists

The document provides an introduction to HTML tables and lists, detailing the structure and usage of various HTML tags such as <table>, <tr>, <th>, and <td>. It explains attributes like colspan, rowspan, cellpadding, and cellspacing, as well as the importance of using tables for tabular data only. Additionally, it covers different types of HTML lists, including unordered, ordered, and definition lists, along with examples of nested lists.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

HTML Tables and Lists

The document provides an introduction to HTML tables and lists, detailing the structure and usage of various HTML tags such as <table>, <tr>, <th>, and <td>. It explains attributes like colspan, rowspan, cellpadding, and cellspacing, as well as the importance of using tables for tabular data only. Additionally, it covers different types of HTML lists, including unordered, ordered, and definition lists, along with examples of nested lists.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

INTRODUCTION TO WEB DESIGN

DCIS1204
SEMISTER TWO
YEAR ONE
HTML Table

A table is a structured set of data made up of rows and columns (tabular data). A table allows you to
quickly and easily look up values that indicate some kind of connection between different types of
data.
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table
data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and c entered
By default, the text in <td> elements are regular and left-aligned.
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML table

<!DOCTYPE html>
<html>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
HTML table

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell.
Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings,
which are defined in <th> tag are centered and bold by default.
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Neno</td>
<td>7000</td>
</tr>
</table>
</body>
HTML Table

Cellpadding and Cellspacing Attributes


Cellpadding and cellspacing are used to adjust the white space in the table cells. The cellspacing attribute defines space
between table cells, while cellpadding represents the distance between cell borders and the content within a cell.
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Neno</td>
<td>7000</td>
</tr>
</table>
</body>
HTML Table

Colspan and Rowspan Attributes


Colspan attribute is used when want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Two rows merged</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td colspan = "2">3 columns merged</td>
</tr>
</table>
</body>
HTML Table

Table Height and Width


You can set a table width and height using width and height attributes. You can specify table width or height in terms of
pixels or in terms of percentage of available screen area.
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
HTML Table

Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is
deprecated in newer version of HTML/XHTML.
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
HTML Table

Table Header, Body, and Footer


Tables can be divided into three portions − a header, a body, and a foot. The head and foot are
rather similar to headers and footers in a word-processed document that remain the same for every
page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is
notable that <thead> and <tfoot> tags should appear before <tbody>
HTML Table

<table border = "1" width = "100%">


<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
HTML Table

Nested Tables
You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag
<td>.

<tableborder= "1"width= "100%"style="background-color: yellow;">

<caption>This is the first table</caption>


<tr>
<td>
<table border = "1" width = "50%" style="background-color: red">
<caption>This is the second table nested with in the first one</caption>
<tr>
<th>Name</th><th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td><td>5000</td>
</tr>
HTML Table

Continuation of the table code


<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
HTML Table

Note: In HTML5, the <tfoot> element can be placed either before or after the <tbody> and <tr>
elements, but must appear after any <caption>, <colgroup>, and <thead> elements.

NB: Do not use tables for creating web page layouts. Table layouts are slower at rendering, and very
difficult to maintain. It should be used only to display tabular data.
HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are
three different types of HTML lists:
<ul> − An unordered list. This will list items using plain bullets.
<ol> − An ordered list. This will use different schemes of numbers to list your items.
<dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked
with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML Lists

HTML Ordered List or Numbered List


In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
HTML Lists

HTML Description List or Definition List


HTML Description list is also a list style which is supported by HTML and XHTML. It is also
known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other
name-value list.
The HTML definition list contains following three tags:
<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description).
HTML Lists

<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
HTML Lists

HTML Nested List


A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list.
<ol>
<li>Uganda
<ul>
<li>Kampala</li>
</ul>
</li>
<li>Kenya
<ul>
<li>Nairobi</li>
</ul>
</li>
<li>Rwanda
<ul>
<li>Kigali</li>
</ul>
</li>
</ol>

You might also like