Scribd
Upload
23 views24 pages

l7 HTML Tables

The document discusses how to format text and create tables and lists in HTML. It explains that the <table> tag defines an HTML table and the <tr>, <th>, and <td> tags define table rows, headings, and cells. It also discusses how CSS can be used to style tables by adding borders, padding, and background colors. For lists, it explains that unordered lists use the <ul> tag while ordered lists use the <ol> tag, and both use <li> tags for list items. Descriptions lists pair terms and descriptions using the <dl>, <dt>, and <dd> tags.

Uploaded by

bargabinomichael6
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
23 views24 pages

l7 HTML Tables

The document discusses how to format text and create tables and lists in HTML. It explains that the <table> tag defines an HTML table and the <tr>, <th>, and <td> tags define table rows, headings, and cells. It also discusses how CSS can be used to style tables by adding borders, padding, and background colors. For lists, it explains that unordered lists use the <ul> tag while ordered lists use the <ol> tag, and both use <li> tags for list items. Descriptions lists pair terms and descriptions using the <dl>, <dt>, and <dd> tags.

Uploaded by

bargabinomichael6
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/ 24

HTML Text

Formatting
Prepared by: Era Marie F. Gannaban
• 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.
EXAMPLE
• <table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
• BORDER
table, th, td {
border: 1px solid black;
}
• COLLAPSE
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
• CELL PADDING
th, td {
padding: 15px;
}
• LEFT ALIGN HEADINGS
th {
text-align: left;
}
• BORDER SPACING
table {
border-spacing: 5px;
}
CELLS THAT SPANS MANY COLUMNS
• <table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
CELLS THAT SPAN MANY ROWS
• <table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
TABLE ADD A CAPTION
• <table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
SPECIAL STYLE FOR ONE TABLE
• <table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
• #t01 {
width: 100%;
background-color: #f1f1c1;
}
• #t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
color: white;
background-color: black;
}
• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading
• Use the HTML <caption> element to define a table caption
• Use the CSS border property to define a border
• Use the CSS border-collapse property to collapse cell borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table
Lists
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
• <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• A description list is a list of terms, with a description of each
term.
• 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>
Unordered Lists
• The CSS list-style-type property is used to define the style of
the list item marker. It can have one of the following values:
• Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• Circle
• <ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Nested HTML List
• <ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
• The type attribute of the <ol> tag, defines the type of the list
item marker:
• Numbers
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• Uppercase
• <ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• Lowercase
• <ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• Roman Numbers
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• Nested HTML List
• <ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Thank You!

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy