Posts

Showing posts from June, 2026

HTML LISTS

-
HTML provides three main types of lists: 1. Unordered List ( <ul> ) Used when the order of items does not matter. Items are displayed with bullet points. <ul> <li> Apple </li> <li> Banana </li> <li> Orange </li> </ul> Output: Apple Banana Orange 2. Ordered List ( <ol> ) Used when the order of items is important. Items are displayed with numbers by default. <ol> <li> Wake up </li> <li> Brush teeth </li> <li> Eat breakfast </li> </ol> Output: Wake up Brush teeth Eat breakfast You can change the numbering style: <ol type = "A" > <li> HTML </li> <li> CSS </li> <li> JavaScript </li> </ol> type values: 1 → 1, 2, 3 (default) A → A, B, C a → a, b, c I → I, II, III i → i, ii, iii 3. Description List ( <dl> ) Used for terms and their descriptions. <dl> ...
Post a Comment
Read more

HTML TABLE COLOR GROUP | HTML GROUP

-
If you want to color different groups (rows, columns, or sections) in an HTML table, here are a few common approaches. 1. Color Row Groups <table border = "1" style = " border-collapse: collapse ; width: 100 % ; " > <tr style = " background-color:#4CAF50; color: white ; " > <th> Name </th> <th> Department </th> <th> Salary </th> </tr> <!-- Group 1 --> <tr style = " background-color:#E8F5E9; " > <td> John </td> <td> HR </td> <td> $4,000 </td> </tr> <tr style = " background-color:#E8F5E9; " > <td> Sarah </td> <td> HR </td> <td> $4,500 </td> </tr> <!-- Group 2 --> <tr style = " background-color:#E3F2FD; " > <td> Mike </td> <td> IT </td> <td> $5,200 </td> ...
Post a Comment
Read more

HTML TABLE STYLING | HTML STYLE

-
If you want to style an HTML table with CSS, here's a clean modern example: <table class = "styled-table" > <thead> <tr> <th> Name </th> <th> Age </th> <th> City </th> </tr> </thead> <tbody> <tr> <td> John </td> <td> 28 </td> <td> New York </td> </tr> <tr> <td> Sarah </td> <td> 32 </td> <td> Chicago </td> </tr> <tr> <td> Mike </td> <td> 25 </td> <td> Boston </td> </tr> </tbody> </table> . styled-table { width: 100 % ; border-collapse: collapse ; font-family: Arial , sans-serif ; box-shadow: 0 2 px 10 px rgba ( 0 , 0 , 0 , 0.1 ); } . styled-table th , . styled-table td { padding: 12 px 15 px ; text-align: left ; bo...
Post a Comment
Read more

HTML TABLE PADDING & SPACING

-
HTML Padding & Spacing Padding is the space inside an HTML element, between its content and its border. Spacing (Margin) is the space outside an HTML element, creating distance between it and other elements. Diagram Margin (Outside Space) ┌─────────────────────────────┐ │ │ │ Border │ │ ┌─────────────────────┐ │ │ │ Padding │ │ │ │ ┌───────────────┐ │ │ │ │ │ Content │ │ │ │ │ └───────────────┘ │ │ │ └─────────────────────┘ │ │ │ └─────────────────────────────┘ Example <!DOCTYPE html> <html> <head> <style> . box { width: 200 px ; border: 2 px solid black ; padding: 20 px ; /* Space inside the border */ margin: 30 px ; /* Space outside the border */ } </style> </head> <body> <div class = ...
Post a Comment
Read more

HTML TABLE HEADERS

-
An HTML Table Header is the top row of a table that contains the titles of each column. It is created using the <th> (table header) tag. HTML Example <table border = "1" > <tr> <th> Student ID </th> <th> Name </th> <th> Marks </th> </tr> <tr> <td> 101 </td> <td> Ali </td> <td> 85 </td> </tr> <tr> <td> 102 </td> <td> Sara </td> <td> 92 </td> </tr> </table> Diagram +------------+-----------+--------+ | Student ID | Name | Marks | ← Header Row (<th>) +------------+-----------+--------+ | 101 | Ali | 85 | ← Data Row (<td>) +------------+-----------+--------+ | 102 | Sara | 92 | ← Data Row (<td>) +------------+-----------+--------+ Structure of a Table <table> ├── <tr> ← Table Row ...
Post a Comment
Read more

HTML TABLE SIZES

-
HTML tables can have different sizes for each column, row or the entire table.                             Use the style attribute with the width or height properties to specify the size of a table, row or column. HTML Table Width To set the width of a table, add the style attribute to the <table> element: EXAMPLE:- Set the width of the table to 100%: < 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 ...
Post a Comment
Read more