In this article we want to talk about Tables and lists in HTML, HTML (Hypertext Markup Language) is standard markup language used for creating web pages. HTML provides different elements for organizing content, including tables and lists. in this article we are going to explore basics of creating tables and lists in HTML.
Tables are useful way to display data in tabular format on web pages. for creating tables in HTML we use table element. table consists of one or more rows, which are defined using tr element. each row can contain one or more cells which are defined using the td element.
This is an example of simple table in HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <tr> <td>Item 1</td> <td>Price 1</td> </tr> <tr> <td>Item 2</td> <td>Price 2</td> </tr> <tr> <td>Item 3</td> <td>Price 3</td> </tr> </table> |
In the above code we have created table element. within table we have created three rows using tr element. each row contains two cells, which are defined using td element. we can also add heading row to the table using th element instead of td.
We can use CSS (Cascading Style Sheets) to style tables and its elements. this is an example of adding some basic styles to the table:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } </style> |
Now let’s talk about lists, so Lists are useful way to organize content on web pages. HTML provides two types of lists: ordered lists (<ol>) and unordered lists (<ul>). ordered list is numbered list of items, while an unordered list is bulleted list of items. each list item is defined using the <li> element.
This is an example of simple ordered list in HTML:
1 2 3 4 5 |
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> |
In the above code we have created an ordered list using the <ol> element, and three list items using the <li> element.
This is an example of simple unordered list in HTML:
1 2 3 4 5 |
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
In the above code we have created an unordered list using the <ul> element, and three list items using the <li> element.
We can also create nested lists by placing list inside another list item. this is an example of nested list in HTML:
1 2 3 4 5 |
<ul> <li>Item 1</li> <li>Item 2 <ul> <li>Subitem |
Learn More on Python
- PyQt5 QTableWidget Tutorial: Create a Dynamic Table
- Create GUI Applications with Python & TKinter
- Python TKinter Layout Management
- How to Create Label in TKinter
- How to Create Buttin in Python TKinter
- Build Music Player in Python TKinter
- Python GUI Programming with TKinter
- TKinter VS PyQt, Which one is Good
- Creating Custom Widgets in TKinter
- How to Create Menus in TKinter