This code creates a simple bio-data table with labels on the left and corresponding information on the right. You can customize it further by:
Adding more sections (e.g., contact information, awards, etc.)
Using different table layouts (e.g., two columns, multiple rows)
Adding styles to personalize the look and feel
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Bio-Data</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
border-collapse: collapse;
width: 500px;
margin: 0 auto;
}
th, td {
padding: 8px;
border: 1px solid #ddd;
}
th {
background-color: #eee;
font-weight: bold;
text-align: left;
width: 150px;
}
td ul {
margin: 0;
padding: 0;
list-style: none;
}
td li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<center><h1>My Bio-Data</h1></center>
<table>
<tr>
<th>Name:</th>
<td>John Doe</td>
</tr>
<tr>
<th>Age:</th>
<td>25</td>
</tr>
<tr>
<th>Occupation:</th>
<td>Software Engineer</td>
</tr>
<tr>
<th>Education:</th>
<td>Bachelor of Science in Computer Science</td>
</tr>
<tr>
<th>Skills:</th>
<td>
<ul>
<li>Programming (Python, JavaScript)</li>
<li>Web Development</li>
<li>Problem Solving</li>
<li>Communication</li>
</ul>
</td>
</tr>
<tr>
<th>Interests:</th>
<td>
<ul>
<li>Hiking</li>
<li>Reading</li>
<li>Playing guitar</li>
<li>Traveling</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
This code creates a simple webpage displaying a bio-data in a well-formatted table. Let's break it down step by step:
1. DOCTYPE and Basic HTML Structure:
<!DOCTYPE html>: This line declares the document type as HTML.
<html> tag: This is the root element of the HTML document.
<head> tag: This section contains meta information about the webpage.
<meta charset="UTF-8">: Defines the character encoding as UTF-8, allowing for proper display of various characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag optimizes the webpage for different screen sizes by setting the viewport to the width of the device and initial zoom level to 100%.
<title>My Bio-Data</title>: Sets the title of the webpage, displayed in the browser tab.
<link rel="stylesheet" href="style.css">: This line links an external stylesheet file named "style.css" (not included in this code) for styling the webpage.
Inline Styles: The <style> tag defines styles directly within the HTML document.
2. Body Section:
<body> tag: This section contains the visible content displayed on the webpage.
<center><h1>My Bio-Data</h1></center>: This centers the heading "My Bio-Data" using the <center> tag (deprecated in HTML5, but used here for demonstration purposes). Modern approaches use CSS for centering.
<table>: This element creates a table to display the bio-data information.
3. Table Structure and Styling:
<table>: Defines the main table element.
<tr>: Defines table rows.
<th>: Defines table header cells for labels.
<td>: Defines table data cells for content.
Table Styling (within <style> tag):
border-collapse: collapse: Removes spacing between table cells, creating a more compact look.
width: 500px: Sets the width of the table to 500 pixels.
margin: 0 auto: Centers the table horizontally within the webpage.
Individual styling for th, td, th ul, and td li define various aspects like padding, border, background color, font weight, text alignment, and list formatting within data cells.
4. Bio-Data Content:
Within the table cells (<td>), the code defines various bio-data entries like name, age, occupation, education, skills, and interests. Skills and interests are further formatted using unordered lists (<ul> and <li>) for better readability.
Comments