Scribd
Upload
2 views6 pages

g1 Computer Programming

The document provides an overview of HTML tags and attributes for creating lists and tables in webpages, detailing the usage of <ul>, <ol>, <dl>, <table>, <tr>, <th>, and <td> tags. It includes examples of unordered, ordered, and description lists, as well as a sample HTML table with attributes. Additionally, it lists supported color names and their hexadecimal values for styling elements in CSS and HTML.

Uploaded by

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

g1 Computer Programming

The document provides an overview of HTML tags and attributes for creating lists and tables in webpages, detailing the usage of <ul>, <ol>, <dl>, <table>, <tr>, <th>, and <td> tags. It includes examples of unordered, ordered, and description lists, as well as a sample HTML table with attributes. Additionally, it lists supported color names and their hexadecimal values for styling elements in CSS and HTML.

Uploaded by

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

COMPUTER PROGRAMMING

HTML Tags and Attributes: Building Lists and Tables in Webpages


Presented by Group 1

List Tags and Its Attributes

1. <ul> – Unordered List


Definition: Creates a bulleted list.

Common Attributes:
type (deprecated): Changes bullet style (disc, circle, square).
class, id, sty1le: For styling and identification.

Example:
<ul>

<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>

•Apples
•Oranges
•Bananas

🔹 2. <ol> – Ordered List


Definition: Creates a numbered list.

Attributes:

type: Sets numbering style (1, A, a, I, i).


start: Sets the starting number.
reversed: Displays the list in reverse order.
class, id, style: For styling.

Example:

<ol type="A" start="3">


<li>Math</li>
<li>Science</li>
<li>History</li>
</ol>
A. Math
B. Science
C. History

🔹 3. <dl> – Description List


Definition: Creates a list of terms and descriptions.

Attributes: Common ones like class, id, style.

Example:

<dl>
<dt>HTML</dt>

🔹 4. <dd> – Definition Description


Definition: Describes the term defined by <dt>.

Used inside: <dl>

Example:
<dt>HTML</dt>
<dd>This add structure to a webpage.</dd>

HTML Table Tags and Their Definitions

Tags Definition
<table> Creates a table.

<tr> Table row - contains table cells (<th> or <td>).

<th> Table header cell - bold and centered by default.

<td> Table data cell - holds the data in rows.

<thead> Groups the header content in a table.

<tbody> Groups the main body content in a table.

<tfoot> Groups the footer comtent in a table.

<caption> Adds a title/caption for the table.

<col> Specifies column properties.

<colgroup> Groups columns for styling.


Common Table Attributes

📌 <table> Attributes:

Attribute Description
border Sets boarder width. (deprecated - use CCS)

cellspacing Space between cells. (deprecated)

cellpadding Space inside cells. (deprecated)

width Sets table width.

height Sets table height.

align Alligns the table. (deprecated)

style Inline styling.

class/id Used for CCS and JavaScript Access.

th> and <td> Attributes:

Attribute Description
colspan Spans the cell across multiple columns.

rowspan Spans the cell across multiple rows.

align Aligns cell content horizontallyn

valign Aligns cell content vertically.

style/class/id For styling.


Example of a Simple HTML Table with Attributes:

<table border="1" cellpadding="10" cellspacing="0" style="width: 50%; text-align: center;">


<caption>Student Grades</caption>
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lourience</td>
<td>Math</td>
<td>95</td>
</tr>
<tr>
<td>Jay Brian</td>
<td>Science</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Final Grades for Q1</td>
</tr>
</tfoot>
</table>

Name Subject Grade


Lourience Math 95
Jay Brian Science 89
Final grade for Q1
(spanning all columns).

Key Features from Example Code:


border="1": Adds a thin border around all table cells.
cellpadding="10": Adds 10px of space inside each cell.
cellspacing="0": Removes space between cells.
style="width: 50%; text-align: center;": Makes the table 50% wide and centers all content.
<caption>: Displays "Student Grades" as the title above the table.
<thead>, <tbody>, <tfoot>: Organizes the table into header, body, and footer sections.
<td colspan="3">: Merges all 3 columns in the footer row into one.

Color Names Supported by All Browsers


All major browsers support the 147 CSS3 color names, including the original 16 basic colors and 131
extended colors. These color names can be used directly in CSS and HTML for styling elements.

16 Basic Colors:
These are the foundational color names recognized by all browsers: aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Color Values
Color Names Hex Values
Aqua #00FFFFF
Black #000000
Blue #0000FF
Fuchsia #FF00FF
Gray #808080
Green #008000
Lime #00FF00
Maroon #800000
Navy #000080
Olive #808000
Purple #800080
Red #FF0000
Silver #C0C0C0
Teal #008080
White #FFFFFF
Yellow #FFFF00

How to use them:


You can use these color names directly in your CSS or HTML code by referencing their names (e.g., color:
blue;, <div style="background-color: green;">). They can also be used with hexadecimal codes (e.g.,
#008000 for green) or RGB values (e.g., rgb(0, 255, 0) for green).
Leader:
Glaiza Mae T. Avila
Members:
Bernaden R. Bernardo
Rj DV. Avadinez
Jhustine Rhain A. Adonis
John Loyd G. Alvis
Alwyn John A. Arenas
Prince Zendrick D. Bautista
Richard P. Brosas
Jamil G. Picardal

You might also like