Syntax:<\/strong><\/p>\n
<\/pre>\nCode:<\/strong><\/p>\n\n\n\nEDUCBA’s Page<\/title>\n<\/head>\n
\n Hello World! This is EDUCBA’s first web page. <\/p>\n<\/body>\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
<\/p>\n
How to Create an HTML Table?<\/h3>\n
There are specific table tags to create a table – mainly,
, , | , and . <\/strong><\/p>\nPre-requisites for HTML Table<\/h4>\nFor an absolute beginner, it is essential to know what the different table tags do before writing a basic code.<\/p>\n \n- \n
: <\/strong>Defines a table<\/li>\n- \n
:<\/strong> Defines a table row<\/li>\n- \n
: <\/strong>Defines a table header cell<\/li>\n- \n
: <\/strong>Defines a table data cell<\/li>\n<\/ul>\nStudent Details Table<\/h3>\nJohn has to create a webpage showing the names of students in a class along with their marks in mathematics and science. He draws the following table.<\/p>\n \n\n\nName<\/strong><\/td>\nMathematics<\/strong><\/td>\nScience<\/strong><\/td>\n<\/tr>\n\nMary<\/td>\n | 78<\/td>\n | 92<\/td>\n<\/tr>\n | \nSusan<\/td>\n | 98<\/td>\n | 84<\/td>\n<\/tr>\n | \nAmy<\/td>\n | 63<\/td>\n | 79<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Now, John wants to write the code to transform this table into an HTML table on a webpage. The steps-<\/p>\n Step #1: <\/strong>Open an HTML code editor. This tutorial demonstrates how to write code in Visual Studio Code. If the PC doesn’t have VS Code, one can download it here.<\/p>\nStep #2: <\/strong>Select File > New Text File.<\/p>\n <\/p>\n
Step #3: <\/strong>Click on “Select a language” and then type HTML in the text box. Choose the HTML option to create a new HTML file.<\/p>\n <\/p>\n\n\n
Step #4:<\/strong> Again, go to File > Save As and save the file with the filename.html format.<\/p>\n <\/p>\n
<\/p>\n
Step #5: <\/strong>Add the basic code, i.e., HTML template of doctype declaration, HTML tag, head tag, title tag, and body tag, as shown below. Set the title as Student Details.<\/p>\nCode:<\/strong><\/p>\n\n\n\nStudent Details<\/title>\n<\/head>\n\n<\/body>\n<\/html><\/pre>\nOutput:<\/strong><\/p>\n <\/p>\n
Opening the file should show the following blank web page. Note the title in the browser tab has changed to “Student Details.”<\/p>\n <\/p>\n
Step #6: <\/strong>Now, define the table using the tag inside the body tag. Define the first row using the tag, and add 3 headings cells – Name, Mathematics, and Science, using the tag. Don’t forget to close the tags with a corresponding closing tag.<\/p>\n Code:<\/strong><\/p>\n\n\nName<\/th>\n | Mathematics<\/th>\n | Science<\/th>\n<\/tr>\n<\/table><\/pre>\n Save the file and refresh the webpage to see the updated output:<\/p>\n <\/p>\n
Step #7: <\/strong>Add the student details by defining a row for each student using tag, and adding the data in each cell using tag. Close the table with the <\/table> tag.<\/p>\n Code:<\/strong><\/p>\n\nMary<\/td>\n | 78<\/td>\n | 92<\/td>\n<\/tr>\n | \nSusan<\/td>\n | 98<\/td>\n | 84<\/td>\n<\/tr>\n | \nAmy<\/td>\n | 63<\/td>\n | 79<\/td>\n<\/tr><\/pre>\n Once again, save and refresh the webpage to see the final output:<\/p>\n Code:<\/strong><\/p>\n\n\n\nStudent Details<\/title>\n<\/head>\n\n \n\nName<\/th>\n | Mathematics<\/th>\n | Science<\/th>\n<\/tr>\n | \nMary<\/td>\n | 78<\/td>\n | 92<\/td>\n<\/tr>\n | \nSusan<\/td>\n | 98<\/td>\n | 84<\/td>\n<\/tr>\n | \nAmy<\/td>\n | 63<\/td>\n | 79<\/td>\n<\/tr>\n<\/table>\n<\/body>\n<\/html><\/pre>\nApplications of HTML<\/h3>\n\n\n\nApplication<\/strong><\/td>\nHow Does HTML Help?<\/strong><\/td>\n<\/tr>\n\nWeb pages<\/strong><\/td>\nTo create web pages, provide the structure and content for displaying information in a web browser.\n\n\n ?<\/p>\n<\/td>\n<\/tr>\n | \nE-commerce<\/strong><\/td>\nTo create online stores, product catalogs, and shopping carts, allowing customers to purchase products and services online.\n ?<\/p>\n<\/td>\n<\/tr>\n | \nLanding pages<\/strong><\/td>\nTo develop compelling landing pages for websites that capture a visitor’s attention and encourage them to take a specific action.\n ?<\/p>\n<\/td>\n<\/tr>\n | \nNewsletters<\/strong><\/td>\nIt allows the creation of interactive and visually appealing newsletters, such as corporate newsletters, that deliver to subscribers via email.\n ?<\/p>\n<\/td>\n<\/tr>\n | \nOnline portfolios<\/strong><\/td>\nTo create online portfolios for artists, photographers, and other creatives, showcasing their work and skills to potential clients and employers.\n ?<\/p>\n<\/td>\n<\/tr>\n | \nBlogs<\/strong><\/td>\nOne can create blogs, which are personal websites that provide a platform for writing and publishing articles and other content.<\/td>\n<\/tr>\n | \nDocumentation<\/strong><\/td>\nIt helps to create documentation and help files, providing information and guidance to users of the software and other products.\n ?<\/p>\n<\/td>\n<\/tr>\n | \nAdvertisements<\/strong><\/td>\nIt can help make advertisements embedded on websites and social media platforms, promoting products and services to a wide audience.\n ?<\/p>\n<\/td>\n<\/tr>\n | \nForms<\/strong><\/td>\nTo create a form, one can use | | | | | | | | | | | | | |
| | | | | | | | | |