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
