Scribd
Upload
8 views22 pages

HTML Tables Lists

Uploaded by

Muhammad Rasool Al-Jaafrah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
8 views22 pages

HTML Tables Lists

Uploaded by

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

HTML TABLES & LISTS

BIT 381
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

A table is a section of information, broken up into columns and/or rows of blocks,


called cells.

! A table in HTML consists of table cells inside rows and


columns.
Define an HTML Table
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 centered.

By default, the text in <td> elements are regular and left-aligned.
Define an HTML Table
Define an HTML Table
A simple HTML table:
A simple HTML table:
Table Cells
o Each table cell is defined by a <td> and a </td> tag.
o td stands for table data.

<td>Jill</td>

Note: A table cell can contain all sorts of HTML elements:


text, images, lists, links, other tables, etc.
A simple HTML table:
Table Rows
o Each table row starts with a <tr> and ends with a </tr> tag.
o tr stands for table row.
o You can have as many rows as you like in a table; just make sure that the number of cells
are the same in each row.
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
A simple HTML table:
Table Headers
o Sometimes you want your cells to be table header cells. In those cases use the <th>

tag instead of the <td> tag:


o th stands for table header.
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
By default, the text in <th> elements are bold and centered,
but you can change that with CSS.
HTML Table Borders

o To add a border to a table, use the CSS border property


o Remember to define borders for both the table and the table cells.

<style>
table, th, td {
border: 1px solid black;
}
</style>
Collapsed Table Borders

o To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse.
o This will make the borders collapse into a single border
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
Border Color

o With the border-color property, you can set the color of the border.

<style>
th, td {
border-color: #96D4D4;
}</style>
HTML Table - Add Cell Padding

o Cell padding specifies the space between the cell content and its borders.
o If you do not specify a padding, the table cells will be displayed without padding.
o By default the padding is set to 0.
o To set the padding, use the CSS padding property:

<style>
th, td {
padding: 15px;
}</style>
HTML Table - Add Border Spacing

o Border spacing specifies the space between the cells.


o By default the space is set to 2 pixels.
o To set the border spacing for a table, use the CSS border-spacing property:

<style>
table {
border-spacing: 30px;
}</style>
HTML Table - Example
HTML Table - Example
<BODY>
<!DOCTYPE html> <H2> Creating a Table with border </H2>
<table>
<HTML> <caption> Employees </caption>
<HEAD> <tr>
<TITLE> BIT 381 </TITLE> <th>Firstname</th>
<th>Lastname</th>
<STYLE> <th>Age</th>
table, th,td { </tr>
<tr>
border: 2px solid black; <td>Mohammad </td>
padding: 20px;} <td>AHMAD</td>
<td>40</td>
table {border-spacing: 15px; } </tr>
th, td { padding: 10px; } <tr>
th {text-align: center; } <td>SHATHA </td>
<td>KHALID</td>
td { text-align: left; } <td>23</td>
</STYLE> </tr>
</table>
</HEAD> </BODY>
</HTML>
HTML Lists

o HTML lists allow web developers to group a set of related items in lists.

An unordered HTML An Ordered HTML list:


list:
1.First item
•Item 2.Second item
•Item 3.Third item
•Item 4.Fourth item
•Item
Unordered HTML List

o An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
o The list items will be marked with bullets (small black circles) by default:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

o An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
o The list items will be marked with numbers by default:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
o HTML also supports description lists.
o A description list is a list of terms, with a description of each term.
o The <dl> tag defines the description list, the <dt> tag defines the term (name), and the
<dd> tag describes each term.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold
drink</dd>
</dl>
HTML Lists - Example
HTML Lists - Example
<!DOCTYPE html> <dl>
<HTML> <dt>Coffee</dt>
<TITLE> BIT381 Lists </TITLE>
<BODY>
<dd>- black hot drink</dd>
<ul> <dt>Milk</dt>
<li>Coffee</li> <dd>- white cold drink</dd>
<li>Tea</li> <dt>Tea</dt>
<li>Milk</li> <dd>- Hot Tea drink with Mint
</ul>
<ol>
</dd>
<li>Coffee</li> </dl>
<li>Tea</li> </BODY>
<li>Milk</li> </HTML>
</ol>

You might also like