Welcome HTML Part 2
Congratulations on completing Part 1 of our HTML tutorial! You’re making great progress on your journey to mastering HTML. In this chapter, we’ll dive even deeper into the world of HTML and explore more advanced topics. From HTML Style and Color to Lists and Tables, you’ll learn how to add style and structure to your web pages. Let’s continue our learning adventure together!
Enhancing Your HTML with Style
The style attribute in HTML is a powerful tool that allows you to customize the visual appearance of elements on a webpage. It provides a convenient way to quickly add inline styles and make immediate adjustments to the presentation of your content. In our study, we will explore the style attribute and its various uses to create visually appealing web pages..
However, for larger projects, it is recommended to utilize external CSS files or internal style tags to separate the style from the structure of your HTML document. This approach promotes better organization, reusability, and easier maintenance of your styles. In the upcoming chapters, we will delve deeper into CSS (Cascading Style Sheets) and explore its full potential in styling and formatting web pages. By mastering CSS, you will gain the ability to create visually captivating and well-designed websites that effectively engage your audience.
Style Syntax
The style attribute follows a simple syntax:
<tagname style="property: value;">
Background Color
You can use the CSS background-color property to set the background color of an element.
EXAMPLE
<h1 style="background-color: LightPink;">Hello World</h1> <p style="background-color: DarkOrange;">Lorem ipsum...</p>OUTPUT
Hello World
Lorem ipsum...
Text Color
To change the color of text within an element, you can use the CSS color property.
EXAMPLE
<h1 style="color: DarkSlateBlue;">Hello World</h1> <p style="color: Crimson;">Lorem ipsum...</p> <p style="color: MediumVioletRed;">Ut wisi enim...</p>OUTPUT
Hello World
Lorem ipsum...
Ut wisi enim...
Border Color
To set the color of borders, you can use the CSS border property.
EXAMPLE
<h1 style="border: 2px solid ForestGreen;">Hello World</h1> <h1 style="border: 2px solid Chocolate;">Hello World</h1> <h1 style="border: 2px solid RoyalBlue;">Hello World</h1>OUTPUT
Hello World
Hello World
Hello World
You may read more about HTML colors (“HSL Value” , “HEX Value”, “RGBA and HSLA Values”) in upcomming topic The World of Colors in HTML .
Fonts
The CSS font-family property allows you to specify the font used for an element's text.
EXAMPLE
<h1 style="font-family: Arial;">This is a heading</h1> <p style="font-family: Verdana;">This is a paragraph.</p>OUTPUT
This is a heading
This is a paragraph.
Text Size
You can adjust the size of text using the CSS font-size property.
EXAMPLE
<h1 style="font-size: 24px;">This is a heading</h1> <p style="font-size: 16px;">This is a paragraph.</p>OUTPUT
This is a heading
This is a paragraph.
Text Alignment
The CSS text-align property is used to align text within an element.
EXAMPLE
<h1 style="text-align: center;">Centered Heading</h1> <p style="text-align: justify;">Justified paragraph.</p>OUTPUT
Centered Heading
Justified paragraph.
The World of Colors in HTML
Colors in HTML can be specified using predefined color names, RGB values, HEX values, and HSL values.
HTML supports a range of predefined color names that you can use to specify colors.
By utilizing these different color representation options, you have the flexibility to choose and apply colors that suit your design requirements in HTML
Color Value
HTML provides different ways to specify colors using values such as RGB, HEX, and HSL.
You can use RGB values to define colors by specifying the intensity of red, green, and blue. For example:
EXAMPLE
<h1 style="background-color: rgb(220, 20, 60);">...</h1> <h1 style="background-color: rgb(0, 128, 0);">...</h1>OUTPUT
...
...
HEX Value
HEX values represent colors using a hexadecimal code. For instance:
EXAMPLE
<h1 style="background-color: #ff1493;">...</h1> <h1 style="background-color: #800080;">...</h1>OUTPUT
...
...
HSL Values
HSL values define colors based on hue, saturation, and lightness. Here's an example:
EXAMPLE
<h1 style="background-color: hsl(30, 100%, 50%);">...</h1> <h1 style="background-color: hsl(240, 100%, 50%);">...</h1>OUTPUT
...
...
RGBA and HSLA Values
RGBA and HSLA values allow you to specify colors with an additional alpha channel for transparency.
EXAMPLE
<h1 style="background-color: rgba(139, 0, 139, 0.5);">...</h1> <h1 style="background-color: hsla(120, 100%, 25%, 0.5);">...</h1>OUTPUT
...
...
If you want to learn more about RGB combinations and explore a wide range of colors, you can visit Adobe Color. This fantastic tool allows you to play with colors and discover the exact color code values that match your requirements. It’s a great resource for creating stunning color palettes and understanding the art of color in web design. Another fantastic resource to explore and play with colors is ColorHexa. This website offers a delightful playground where you can experiment with various color combinations, discover their HEX, RGB, HSL values, and even explore the meaning and symbolism behind each color. ‘ColorHexa’ is a treasure trove for creative minds, allowing you to fine-tune your color palette and bring a new level of vibrance to your web projects. Dive in and let your imagination run wild with the rich possibilities that ‘ColorHexa’ has to offer! One more place to play with color is Coolors. Here, you can explore multiple colors and unleash your creativity.
Building Structured Lists in HTML
Ordered and Unordered Lists
In HTML, you can create both ordered lists and unordered lists to organize and present information in a structured manner.
An unordered HTML list Item1 Item2 Item3 An ordered HTML list 1. Item1 2. Item2 3. Item3
Ordered Lists
Ordered lists are used when you want to display a list of items in a specific order. Each item in an ordered list is marked with a number or letter. Here's an example of an ordered list in HTML.
EXAMPLE
<ol style="line-height: .4;"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>OUTPUT
- First item
- Second item
- Third item
Unordered Lists
Unordered lists are used when the order of the items doesn't matter. Each item in an unordered list is marked with a bullet point. Here's an example of an unordered list in HTML:
EXAMPLE
<ul style="line-height: .4;"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>OUTPUT
- First item
- Second item
- Third item
List-Style-Type With Unordered List
The list-style-type property is used to define the appearance of the list marker for unordered lists in HTML. It specifies the style or shape of the bullet point or marker that appears before each list item.
Here are the possible values for the list-style-type property and their corresponding
disc: This is the default value. It displays a filled circle as the list marker.
EXAMPLE
<ul style="list-style-type: disc; line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>OUTPUT
- Item 1
- Item 2
- Item 3
circle: It displays a hollow circle as the list marker.
EXAMPLE
<ul style="list-style-type: circle; line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>OUTPUT
- Item 1
- Item 2
- Item 3
square: It displays a square as the list marker.
EXAMPLE
<ul style="list-style-type: square; line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>OUTPUT
- Item 1
- Item 2
- Item 3
none: It removes the list marker, leaving only the list items.
EXAMPLE
<ul style="list-style-type: none; line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>OUTPUT
- Item 1
- Item 2
- Item 3
disclosure-closed: It displays a closed disclosure triangle as the list marker. This is often used for nested lists.
EXAMPLE
<ul style="list-style-type: disclosure-closed; line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>OUTPUT
- Item 1
- Item 2
- Item 3
disclosure-open: It displays an open disclosure triangle as the list marker. This is also used for nested lists
EXAMPLE
<ul style="list-style-type: disclosure-open; line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>OUTPUT
- Item 1
- Item 2
- Item 3
Type and Start Attributes in HTML Ordered List
In HTML, the type and start attributes are used in conjunction with the <ol> (ordered list) element to customize the numbering or lettering of the list items.
The type attribute specifies the style of the numbering or lettering, while the start attribute determines the starting value for the list.
Here's how you can use the type and start attributes in an ordered list:
Using the type attribute:
type=”1″: It displays numbers as the list markers (default behavior).
EXAMPLE
<ol type="1" style="line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>OUTPUT
- Item 1
- Item 2
- Item 3
type=”A”: It displays uppercase letters (A, B, C, etc.) as the list markers.
EXAMPLE
<ol type="A" style="line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>OUTPUT
- Item 1
- Item 2
- Item 3
type=”a”: It displays lowercase letters (a, b, c, etc.) as the list markers.
EXAMPLE
<ol type="a" style="line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>OUTPUT
- Item 1
- Item 2
- Item 3
type=”I”: It displays uppercase Roman numerals (I, II, III, etc.) as the list markers
EXAMPLE
<ol type="I" style="line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>OUTPUT
- Item 1
- Item 2
- Item 3
type=”i”: It displays lowercase Roman numerals (i, ii, iii, etc.) as the list markers.
EXAMPLE
<ol type="i" style="line-height: .4;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>OUTPUT
- Item 1
- Item 2
- Item 3
Using the start attribute:
The start attribute in an ordered list specifies the starting value, which accepts numeric values such as integers. However, it does not support character values like "B". The start value determines the number at which the ordered list should start counting.
start=”5″: It sets the starting value to 5.
EXAMPLE
<ol start="5" style="line-height: .4;"> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ol>OUTPUT
- Item 5
- Item 6
- Item 7
start=”10″: It sets the starting value to 10.
EXAMPLE
<ol start="10" style="line-height: .4;"> <li>Item 10</li> <li>Item 11</li> <li>Item 12</li> </ol>OUTPUT
- Item 10
- Item 11
- Item 12
By utilizing the type and start attributes, you can create customized ordered lists that fit your specific requirements.
Nested Lists
Nested lists in HTML allow you to create hierarchical structures of bulleted lists. You can nest <ul> or <ol> (unordered or ordered) lists within another list item to create sub-levels of items. This is useful for organizing and structuring content with different levels of importance or related information.
EXAMPLE
<ul style="line-height: .4;"> <li>List item 1</li> <li>List item 2 <ul style="line-height: .4;"> <li>Nested item 1</li> <li>Nested item 2</li> </ul> </li> <li>List item 3</li> </ul>OUTPUT
- List item 1
- List item 2
- Nested item 1
- Nested item 2
- List item 3
In the example above, List item 2 contains a nested unordered list with two sub-items, Nested item 1 and Nested item 2.
Definition Lists
Definition lists, also known as description lists, are used to present terms and their corresponding definitions or descriptions. They consist of three main elements: <dl> (definition list), <dt> (term), and <dd> (definition or description). This structure is particularly useful when providing explanations, glossaries, or key terms along with their meanings or explanations.
EXAMPLE
<dl style="line-height: .4;"> <dt>Term 1</dt> <dd>Definition 1</dd> <dt>Term 2</dt> <dd>Definition 2</dd> </dl>OUTPUT
- Term 1
- Definition 1
- Term 2
- Definition 2
In the example above, Term 1 is followed by its corresponding Definition 1, and Term 2 is followed by Definition 2. This format helps to clearly define terms and provide relevant explanations or descriptions.
In this type of list, the emphasis is on providing descriptive information rather than strict definitions. It can be used for various purposes, such as providing metadata, key-value pairs, or any scenario where you need to present a term along with its corresponding description.
HTML List Tags
<ul>: Represents an unordered list to display a collection of items without a specific order.
<ol>: Represents an ordered list to display a collection of items in a specific order.
<li>: Represents an item in a list, used as a child element of <ul> or <ol>.
<dl>: Represents a definition list to display terms and their corresponding descriptions.
<dt>: Represents a term in a definition list, used as a child element of <dl>.
<dd>: Represents the description of a term in a definition list, used as a child element of <dl>.
<dir>: Represents a directory list, which displays a list of file names or directory names.
<ol type=””>: Allows specifying different types of numbering for an ordered list, such as “A” for uppercase letters or “i” for Roman numerals.
For your better understanding, we have prepared a code that showcases the usage of different list-related HTML tags.
EXAMPLE
<b >Types of Fruits</b> <b >Unordered List:</b> <ul class="fruit-list"> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> <b >Ordered List:</b> <ol class="fruit-list"> <li>Strawberry</li> <li>Mango</li> <li>Grapes</li> </ol> <b >Definition List:</b> <dl class="fruit-list"> <dt>Apple</dt> <dd>A round fruit with a red or green skin.</dd> <dt>Banana</dt> <dd>A curved fruit with a yellow skin.</dd> <dt>Orange</dt> <dd>A citrus fruit with a bright orange skin.</dd> </dl> <b >Directory List:</b> <div class="fruit-list"> <dir> <li>Documents</li> <li>Images</li> <li>Videos</li> </dir> </div> <style> .fruit-list { line-height: 0.4; margin-top: 5px; margin-bottom: 10px; } .fruit-list ul { margin-top: 0; margin-bottom: 0; padding-left: 20px; } .fruit-list li { line-height: 1; } </style>OUTPUT
Types of Fruits Unordered List:
- Apple
- Banana
- Orange
- Strawberry
- Mango
- Grapes
- Apple
- A round fruit with a red or green skin.
- Banana
- A curved fruit with a yellow skin.
- Orange
- A citrus fruit with a bright orange skin.
Explanation of the code:
The code showcases different types of HTML lists along with their corresponding headings. Here is a summary of the elements used:
<b> tag: The <b> tag is used to create a bold heading for each list section. It provides visual emphasis to highlight the purpose of each list.
Unordered List: The unordered list is represented by the <ul> tag. It is used to display a collection of items in no particular order. Each list item is represented by the <li> tag.
Ordered List: The ordered list is represented by the <ol> tag. It is used to display a collection of items in a specific order. Each list item is represented by the <li> tag.
Definition List: The definition list is represented by the <dl> tag. It is used to display a set of terms and their corresponding descriptions. Each term is represented by the <dt> tag, and each description is represented by the <dd> tag.
Directory List: The directory list is represented by the <dir> tag. It displays a list of file names or directory names. Each item is represented by the <li> tag within the <dir> tag.
Menu List: The menu list is represented by the <menu> tag. It is used to display a list of commands or options. Each menu item is represented by the <menuitem> tag.
Note: Please note that the <dir> tag are not widely supported in modern HTML versions. It is included here for reference purposes only.
The code also includes a <style> section to define specific styles for the lists. The .fruit-list class is used to target the lists and apply styles such as line-height, margin, and padding to achieve the desired spacing and formatting.
Overall, the code demonstrates how different HTML list types can be used to organize and present information effectively.
Building Structured Tables in HTML
Tables are a fundamental component in HTML used to organize and display data in a tabular format. They provide a structured way to present information in rows and columns, making it easier for users to comprehend and analyze data. Tables are commonly used in various scenarios such as displaying financial data, creating calendars, presenting product listings, and more. With HTML table tags like <table>, <tr>, <th>, and <td>, developers can create structured layouts, apply styling, and add additional features to enhance the presentation of data.
Table Cells and Rows (<td>, <tr>)
Tables are constructed using the <table>, <tr>, and <td> elements. <table> defines the table, <tr> represents a row, and <td> defines a cell within a row.
EXAMPLE
<table style=" border: 2px solid blue;" > <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>OUTPUT
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
In the above example, we have a basic table with two rows and two columns. Each <td> element represents a cell with its corresponding content.
Table Header (<th>)
Table headers provide a way to label and describe the content of columns or rows. They are marked using the <th> element, which stands for table header.
EXAMPLE
<table style=" border: 2px solid blue;" > <tr > <th>Header 1</th> <th>Header 2</th> </tr> <tr id="td1"> <td>Data 1</td> <td>Data 2</td> </tr> </table>OUTPUT
Header 1 | Header 2 |
---|---|
Data 1 | Data 2 |
In this example, we have added table headers using the <th> element. These headers provide a clear distinction for the columns.
Vertical Table Headers:
In addition to horizontal headers, HTML allows for vertical table headers using the <th> element and the rowspan attribute.
EXAMPLE
<table style=" border: 2px solid blue;" > <tr> <th rowspan="2">Vertical Header</th> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td>Data 4</td> </tr> </table>OUTPUT
Vertical Header | Data 1 | Data 2 |
---|---|---|
Data 3 | Data 4 |
Align Table Headers:
Table headers can be aligned to improve readability and presentation. You can use the align attribute or CSS properties like text-align to specify the alignment.
EXAMPLE
<table style=" border: 2px solid blue;"> <tr> <th align="left">Left Header</th> <th align="center">Center Header</th> <th align="right">Right Header</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </table>OUTPUT
Left Header | Center Header | Right Header |
---|---|---|
Data 1 | Data 2 | Data 3 |
Header for Multiple Columns:
You can create headers that span multiple columns using the colspan attribute on the <th> element.
EXAMPLE
<table style=" border: 2px solid blue;" > <tr> <th colspan="2">Header for Two Columns</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>OUTPUT
Header for Two Columns | |
---|---|
Data 1 | Data 2 |
Table Caption
A table caption provides a brief description or title for the table. It is added using the <caption> element.
EXAMPLE
<table> <caption>Monthly Sales Data</caption> <tr> <th>Month</th> <th>Sales</th> </tr> <tr> <td>January</td> <td>$1000</td> </tr> </table>OUTPUT
Month | Sales |
---|---|
January | $1000 |
Adding Borders
Borders can be added to table elements using CSS or HTML attributes. HTML provides the border attribute to define the border size and style for the entire table or specific cells.
Table Borders:
By default, tables have borders around each cell. You can control the border of the entire table using the border attribute on the <table> element. Additionally, you can define borders for individual cells using the border attribute on the <td> or <th> elements.
EXAMPLE
<style> #my-table-eh { border: 10px solid blue; /* Set the border style to a blue color */ } </style> <table id="my-table-eh" > <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>OUTPUT
Cell 1 | Cell 2 |
Cell 3 | Cell 4 |
Border Collapse:
The border-collapse property specifies whether the borders of adjacent cells should be collapsed into a single border or separated. The default value is separate, but you can set it to collapse to merge borders.
EXAMPLE
<style> table { border-collapse: collapse; } </style > <table > <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>OUTPUT
Data 1 | Data 2 |
Background Color:
You can apply a background color to the entire table or individual cells using the bgcolor attribute or CSS background-color property.
EXAMPLE
<table style=" border: 5px solid red;" > <tr bgcolor="green"> <td>Data 1</td> <td>Data 2</td> </tr> </table>OUTPUT
Data 1 | Data 2 |
Collapsed Table Borders:
Setting border-collapse: collapse eliminates the gaps between cells, resulting in a more seamless appearance.
EXAMPLE
<style> table { border-collapse: collapse; } #mytd1 td { border: 1px solid red; padding: 5px; } </style> <table> <tr id="mytd1"> <td>Data 1</td> <td>Data 2</td> </tr> </table>OUTPUT
Data 1 | Data 2 |
Round Table Borders:
You can achieve round table borders by using CSS properties like border-radius to specify the curvature of the table corners.
EXAMPLE
<style> table, th, td { border: 2px solid green; border-radius: 10px; } </style> <table > <tr > <td>Data 1</td> <td>Data 2</td> </tr> </table>
Dotted Table Borders:
You can create dotted borders for table cells using the border-style property and setting it to dotted.
EXAMPLE
<style> #mytd2 td { border: 5px dotted red; padding: 5px; } </style> <table> <tr id="mytd2"> <td>Data 1</td> <td>Data 2</td> </tr> </table>OUTPUT
Data 1 | Data 2 |
Border Color:
You can specify the color of table borders using the border-color property or the border shorthand property.
EXAMPLE
<table style="border-color: red; border-width: 2px; border-style: solid;"> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>OUTPUT
Data 1 | Data 2 |
Table Padding & Spacing
Padding and spacing can be adjusted to add space between cells and control the overall appearance of the table. The cellpadding attribute defines the space inside each cell, and the cellspacing attribute controls the space between cells.
EXAMPLE
<style> #myTable td { border: 2px solid red; } </style> <u>WITHOUT SPACING AND PADING</u> <table style=" border: 5px solid blue;" id="myTable" > <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> <u>WITH PADDING</u> <table style="border: 5px solid blue;" cellpadding="15" id="myTable" > <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> <u>WITH SPACING</u> <table style="border: 5px solid blue;" cellspacing="15" id="myTable"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> <u>WITH PADDING AND SPACING</u> <table style="border: 5px solid blue;" cellpadding="15" cellspacing="15" id="myTable"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>OUTPUT
WITHOUT SPACING AND PADING
Cell 1 | Cell 2 |
Cell 1 | Cell 2 |
Cell 1 | Cell 2 |
Cell 1 | Cell 2 |
The code includes examples of tables with different styles, including tables without spacing and padding, tables with padding, tables with spacing, and tables with both padding and spacing. Each table has a border of 5px solid black applied to the table, table headers (th), and table cells (td).
Merging Cells in Tables
Cells can be merged horizontally or vertically to create more complex table structures. The colspan attribute is used to merge cells horizontally, and the rowspan attribute is used to merge cells vertically.
EXAMPLE
<h3 Style="margin-top:1px;margin-bottom:1px;">Example of Merged Cells (colspan) </h3> <table style=" border: 2px solid red;"> <tr> <td colspan="2">Merged Cells</td> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> <h3 Style="margin-top:1px;margin-bottom:1px;">Example of Merged Rows (rowspan) </h3> <table style=" border: 2px solid red;"> <tr> <td rowspan="2">Merged Rows</td> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>OUTPUT
Example of Merged Cells (colspan)
Merged Cells | |
Row 1, Cell 1 | Row 1, Cell 2 |
Row 2, Cell 1 | Row 2, Cell 2 |
Example of Merged Rows (rowspan)
Merged Rows | Row 1, Cell 1 | Row 1, Cell 2 |
Row 2, Cell 1 | Row 2, Cell 2 |
The given code demonstrates the usage of colspan and rowspan attributes to merge cells in a table.
In the first example, we have a table where two cells in the first row are merged using colspan=”2″. This means that the cells span across two columns, effectively creating a single cell that occupies the entire width of the row.
In the second example, we use rowspan=”2″ to merge cells vertically. The first cell in the first row spans across two rows, merging with the corresponding cell in the second row. This creates a vertically merged cell that occupies the height of two rows.
By utilizing colspan and rowspan attributes, we can create more complex table structures with merged cells, allowing for flexible table layouts and data representation.
Table Sizes
When working with tables, you can control their size using various attributes and CSS properties. Here are some key aspects to consider:
Table Width:
You can set the width of a table using CSS by applying the width property to the <table> element. You can specify a fixed pixel value or a relative percentage value.
EXAMPLE
<style> table,th,td {border: 5px solid black;} table { width: 100%; } </style> <table> <!-- table content here --> </table>
Table Column Width:
To control the width of individual table columns, you can apply the width property to the <td> or <th> elements within the <colgroup> or directly to the elements themselves.
EXAMPLE
<table style=" border: 5px solid blue;"> <tr> <td style=" width: 10px;">Column 1</td> <td>Column 2</td> </tr> </table>OUTPUT
Column 1 | Column 2 |
Table Row Height:
Setting the height of table rows can be achieved by applying the height property to the <tr> elements. However, keep in mind that specifying the row height is often controlled by the content within the cells.
EXAMPLE
<table style=" border: 5px solid blue;" > <tr> <td style="height: 150px;" >Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>OUTPUT
Row 1, Cell 1 | Row 1, Cell 2 |
Row 2, Cell 1 | Row 2, Cell 2 |
Table Colspan & Rowspan
HTML provides the colspan and rowspan attributes to span table cells across multiple columns or rows, respectively. This allows you to create complex table structures.
EXAMPLE
<style> #myid4 td {border: 5px solid blue;} </style> <table style=" border: 5px solid blue;" > <tr id="myid4"> <td colspan="2">Header 1</td> </tr> <tr id="myid4"> <td rowspan="2">Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> </tr> </table>OUTPUT
Header 1 | |
Data 1 | Data 2 |
Data 3 |
Table Style
Tables can be styled using CSS to enhance their appearance and layout. Here are some common table styles:
Zebra Stripes:
Zebra striping is a technique that alternates the background color of rows to improve readability. This can be achieved by targeting odd and even <tr> elements and applying different background colors.
EXAMPLE
<style> tr:nth-child(odd) { background-color: #f2f2f2; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td>Data 4</td> </tr> <tr> <td>Data 5</td> <td>Data 6</td> </tr> <tr> <td>Data 7</td> <td>Data 8</td> </tr> </table>
The CSS block selects the tr elements that are at odd positions using the :nth-child(odd) selector.
The background-color property is set to #f2f2f2, which represents a light gray color.
By applying this style, every odd row in the table will have a light gray background color.
EXAMPLE
<style> tr:nth-child(3) { background-color: #f2f2f2; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td>Data 4</td> </tr> <tr> <td>Data 5</td> <td>Data 6</td> </tr> <tr> <td>Data 7</td> <td>Data 8</td> </tr> </table>
The CSS block selects the third tr element using the :nth-child(3) selector.
The background-color property is set to #f2f2f2, which represents a light gray color.
By applying this style, the third row in the table will have a light gray background color.
By using these separate programs, you can clearly observe the difference in coloring between odd rows and the third row in the table.
Vertical Zebra Stripes:
Similar to zebra stripes, you can also apply alternating background colors to columns by targeting odd and even <td> or <th> elements within each row.
EXAMPLE
<style> td:nth-child(odd), th:nth-child(odd) { background-color: #f2f2f2; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td>Data 4</td> </tr> <tr> <td>Data 5</td> <td>Data 6</td> </tr> <tr> <td>Data 7</td> <td>Data 8</td> </tr> </table>
The CSS block selects the td and th elements that are at odd positions within their respective rows using the :nth-child(odd) selector.
The background-color property is set to #f2f2f2, which represents a light gray color.
By applying this style, every odd td and th element will have a light gray background color, creating the vertical zebra stripe effect.
This code will result in alternating light gray background colors for the cells in odd positions within each row, giving a vertical zebra stripe appearance to the table.
Combine Vertical and Horizontal Zebra Stripes:
You can combine the zebra stripes for both rows and columns to create a more visually appealing table layout.
EXAMPLE
<style> tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) { background-color: #f2f2f2; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> <tr> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> </tr> <tr> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> </tr> </table>
The CSS block selects the td elements that are in odd columns of odd rows (tr:nth-child(odd) td:nth-child(even)) and even columns of even rows (tr:nth-child(even) td:nth-child(odd)).
The background-color property is set to #f2f2f2, which represents a light gray color.
By applying this style, the table will have alternating light gray background colors for the cells, creating a vertical zebra stripe effect.
This code will give you a clear visual representation of the vertical zebra stripes in the table.
Horizontal Dividers:
Adding horizontal dividers between rows can improve the visual separation and organization of table data. This can be achieved by applying a border-bottom property to <td> or <th> elements.
EXAMPLE
<style> td, th { border-bottom: 1px solid #ccc; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> <tr> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> </tr> </table>
The CSS block selects all td and th elements within the table.
The border-bottom property is set to 1px solid #ccc, which adds a horizontal line at the bottom of each cell.
By applying this style, the table will have horizontal dividers between each row, enhancing the visual separation of the table data.
This code will give you a clear visual representation of the horizontal dividers in the table.
Hoverable Table:
Adding interactivity to a table by highlighting rows or cells when hovered over by the user can improve the user experience.
EXAMPLE
<style> tr:hover { background-color: #f2f2f2; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> <tr> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> </tr> </table>
The CSS block selects the tr elements within the table.
The :hover pseudo-class is used to apply the styles when the user hovers over a row.
The background-color property is set to #f2f2f2, which changes the background color of the row to a light gray when hovered.
By applying this style, the table rows will have a hover effect, providing visual feedback to the user.
This code will give you a hoverable table where the background color of each row changes when the user hovers over it.
Table Colgroup
The <colgroup> element allows you to group and apply styles to specific columns within a table. Here are some key points:
HTML Table Colgroup:
The <colgroup> element is used to define a group of columns in a table. It allows you to set common properties for multiple columns using the <col> elements within the <colgroup> .
EXAMPLE
<style> col { background-color: lightblue; } </style> <table> <colgroup> <col style="background-color: yellow;"> <col span="2" style="background-color: lightgreen;"> </colgroup> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </table>
Legal CSS Properties:
When styling table columns using <colgroup> , you can use various CSS properties like width, background-color, border, padding, etc., to customize the appearance of the columns.
EXAMPLE
<style> col { width: 100px; background-color: lightblue; } </style> <table> <colgroup> <col> <col style="width: 200px;"> </colgroup> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
Multiple Col Elements:
You can use multiple <col> elements within the <colgroup> to define different styles for different columns.
EXAMPLE
<style> col:first-child { background-color: yellow; } col:nth-child(2) { background-color: lightgreen; } </style> <table> <colgroup> <col> <col> </colgroup> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
Empty Colgroups:
You can use an empty <colgroup> when you don’t have specific styles or properties to apply to the columns.
EXAMPLE
<table> <colgroup></colgroup> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
Hide Columns:
By applying certain styles to columns using <colgroup> , you can hide specific columns from the table.
EXAMPLE
<style> col:nth-child(2) { display: none; } </style> <table> <colgroup> <col> <col> </colgroup> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
These examples demonstrate different aspects of table sizing, styling, and formatting in HTML. It's important to consider the purpose and readability of your tables while applying these techniques.
Using CSS for Table Layout and Design
CSS offers extensive flexibility and control over the layout and design of HTML tables. Here are some techniques you can employ to enhance the visual appearance and structure of your tables:
Table Layout:
The table-layout property allows you to define the algorithm used for laying out the table cells. The two common values are auto and fixed. The auto value automatically adjusts the width of the table and its cells based on content. The fixed value sets a fixed width for the table and its cells, disregarding the content.
EXAMPLE
table { table-layout: fixed; }
Styling Table Cells:
You can target specific table cells using CSS selectors to apply custom styles. This can include background colors, borders, padding, font properties, etc.
EXAMPLE
td { background-color: #f2f2f2; border: 1px solid #ccc; padding: 10px; }
Aligning Table Content:
CSS provides the text-align property to align the content within table cells horizontally. The common values for this property are left, center, right, and justify.
EXAMPLE
td { text-align: center; }
Styling Table Borders:
You can apply custom border styles to table cells, rows, or the entire table using the border property. This includes specifying the border width, style, and color.
EXAMPLE
table { border-collapse: collapse; } td { border: 1px solid #ccc; }
Hover Effects:
By utilizing CSS pseudo-classes such as : hover, you can add interactive hover effects to table rows or cells. This allows you to change background colors, font properties, or other visual styles when the user hovers over the table.
EXAMPLE
tr:hover { background-color: #f2f2f2; }
Responsive Tables:
With the advent of mobile devices, it’s crucial to ensure that tables adapt well to different screen sizes. CSS techniques like media queries and responsive design frameworks can be applied to create tables that are optimized for mobile or small screens.
EXAMPLE
@media (max-width: 600px) { table { /* Adjust styles for smaller screens */ font-size: 14px; } }
These CSS techniques provide you with the flexibility to customize and enhance the layout and design of your HTML tables, making them visually appealing and responsive to different devices and screen sizes.
You can learn more about CSS in HTML in the next part (HTML PART 3) of this tutorial, specifically in the section CSS.
Table Accessibility and Best Practices
When creating tables in HTML, it is essential to consider accessibility guidelines and best practices to ensure that all users can access and understand the table content. Here are some key considerations for table accessibility.
Use Proper Table Markup: Utilize the correct HTML table elements such as <table> , <thead> , <tbody> , <th> , and <td> to structure the table content appropriately. This helps assistive technologies understand the table’s organization and improves navigation for users.
Provide a Table Summary: Include a concise and descriptive summary of the table using the <caption> element. This summary should provide an overview of the table’s purpose or main content.
Use Headers and Scope: Use the <th> element for table headers and specify the scope attribute to associate the header cells with their respective data cells. This helps screen readers and other assistive technologies understand the relationships between headers and data.
Include Alternative Text: If the table contains images, ensure that each image has appropriate alternative text (alt attribute) to describe its content. This allows users who cannot see the images to understand their purpose.
Consider Color Contrast: Ensure sufficient color contrast between the table background, text, and borders. This ensures that users with visual impairments or color deficiencies can read the table content without difficulty.
Implement Responsive Design: Create tables that are responsive and adapt to different screen sizes. This ensures that users accessing the table on various devices, such as mobile phones or tablets, can view and interact with the content comfortably.
Test with Assistive Technologies: Validate the accessibility of your table by testing it with assistive technologies such as screen readers. This helps identify any issues or barriers that may affect users with disabilities and allows you to make necessary improvements.
Use Semantic Markup: Utilize semantic HTML elements whenever possible to provide additional context and structure to the table. For example, use <thead> for the table header section, <tfoot> for the footer section, and <th> for headers rather than regular <td> elements.
By following these accessibility best practices, you can create tables that are inclusive and can be accessed and understood by all users, regardless of their abilities or assistive technologies.