Skip to content

Commit 19b9cb7

Browse files
Saturn225Saturn225
committed
Added new Project Folder - Geography Table
1 parent b591985 commit 19b9cb7

File tree

4 files changed

+183
-0
lines changed

4 files changed

+183
-0
lines changed

‎Geography Table/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Geography Table
2+
3+
This project displays a table of countries and their respective capitals and continents. The table is styled with CSS to improve readability and visual appeal.
4+
5+
## Features
6+
7+
- Displays country information including S.NO, Name, Capital, and Continent.
8+
- Styled with CSS to enhance readability.
9+
- Alternating row colors for better visual distinction.
10+
- Hover effect on rows for easier navigation.
11+
12+
## Usage
13+
14+
To view the table, simply open the `index.html` file in any web browser. The table will be displayed with the predefined styles.
15+
16+
## Code Structure
17+
18+
The project consists of a single HTML file with embedded CSS for styling.
19+
20+
### HTML Structure
21+
22+
The HTML file is structured as follows:
23+
24+
- `<head>`: Contains the title and embedded CSS styles.
25+
- `<body>`: Contains the table wrapped inside a `<div>`.
26+
27+
### CSS Styling
28+
29+
The CSS styles include:
30+
31+
- Borders for the table, headers, and cells.
32+
- Padding and center alignment for table headers and cells.
33+
- Background colors for headers and alternating rows.
34+
- Hover effect for table rows.
35+

‎Geography Table/index.html

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta>
8+
<title>Geography</title>
9+
<link rel="stylesheet" href="styles.css" />
10+
11+
</head>
12+
13+
<body>
14+
15+
<div>
16+
<table>
17+
<thead>
18+
<caption>
19+
<!-- Countries And their Info-->
20+
Geography
21+
<br>
22+
23+
</caption>
24+
<tr>
25+
<th>S.NO</th>
26+
<!-- <th colspan="2">Name</th> -->
27+
<th>Name</th>
28+
<th>Capital</th>
29+
<th>Continent</th>
30+
</tr>
31+
</thead>
32+
33+
<tbody>
34+
<tr>
35+
<td>1</td>
36+
<td>India</td>
37+
<td>New Delhi</td>
38+
<td>Asia</td>
39+
</tr>
40+
<tr>
41+
<td>2</td>
42+
<td>Germany</td>
43+
<td>Berlin</td>
44+
<td>Europe</td>
45+
</tr>
46+
<tr>
47+
<td>3</td>
48+
<td>Argentina</td>
49+
<td>Buenos Aires</td>
50+
<td>South America</td>
51+
</tr>
52+
<tr>
53+
<td>4</td>
54+
<td>Mexico</td>
55+
<td>Mexico City</td>
56+
<td>North America</td>
57+
</tr>
58+
<tr>
59+
<td>5</td>
60+
<td>Japan</td>
61+
<td>Tokyo</td>
62+
<td>Asia</td>
63+
</tr>
64+
<tr>
65+
<td>6</td>
66+
<td>France</td>
67+
<td>Paris</td>
68+
<td>Europe</td>
69+
</tr>
70+
<tr>
71+
<td>7</td>
72+
<td>Australia</td>
73+
<td>Canberra</td>
74+
<td>Australia</td>
75+
</tr>
76+
<tr>
77+
<td>8</td>
78+
<td>Brazil</td>
79+
<td>Brasília</td>
80+
<td>South America</td>
81+
</tr>
82+
<tr>
83+
<td>9</td>
84+
<td>Canada</td>
85+
<td>Ottawa</td>
86+
<td>North America</td>
87+
</tr>
88+
<tr>
89+
<td>10</td>
90+
<td>China</td>
91+
<td>Beijing</td>
92+
<td>Asia</td>
93+
</tr>
94+
<tr>
95+
<td>11</td>
96+
<td>Italy</td>
97+
<td>Rome</td>
98+
<td>Europe</td>
99+
</tr>
100+
<tr>
101+
<td>12</td>
102+
<td>South Africa</td>
103+
<td>Pretoria</td>
104+
<td>Africa</td>
105+
</tr>
106+
</tbody>
107+
</table>
108+
</div>
109+
</body>
110+
111+
</html>

‎Geography Table/styles.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
}
4+
5+
table {
6+
width: 100%;
7+
border-collapse: collapse;
8+
margin: 20px 0;
9+
}
10+
11+
th,
12+
td {
13+
border: 1px solid black;
14+
padding: 8px;
15+
text-align: center;
16+
}
17+
18+
th {
19+
background-color: #f2f2f2;
20+
}
21+
22+
caption {
23+
font-size: 1.5em;
24+
margin: 10px 0;
25+
}
26+
27+
thead {
28+
background-color: #e0e0e0;
29+
}
30+
31+
tbody tr:nth-child(even) {
32+
background-color: #f9f9f9;
33+
}
34+
35+
tbody tr:hover {
36+
background-color: #d1e7dd;
37+
}

‎bmi-calculator - Shortcut.lnk

1.34 KB
Binary file not shown.

0 commit comments

Comments
 (0)