So I’m trying to create a personal website for an assignment, and for some reason why execute the code, the table on the site isn’t recognizing any of the rows as each individual rows. I have the table layout in html and formatting in CSS. Is there any way I can fix this?
A checkered table (in red and black) on a website. However, I keep getting the following result:Graph out i keep getting.
<code>table{
width: 40%;
text-align: center;
}
table, th, td{
border: 3px solid white;
border-collapse: collapse;
text-align: center;
padding: 8px;
}
tr:nth-child (even) {background-color: red;}
tr:hover td {background-color: orange;}</code>
<code>table{
width: 40%;
text-align: center;
}
table, th, td{
border: 3px solid white;
border-collapse: collapse;
text-align: center;
padding: 8px;
}
tr:nth-child (even) {background-color: red;}
tr:hover td {background-color: orange;}</code>
table{
width: 40%;
text-align: center;
}
table, th, td{
border: 3px solid white;
border-collapse: collapse;
text-align: center;
padding: 8px;
}
tr:nth-child (even) {background-color: red;}
tr:hover td {background-color: orange;}<code><!-- Header Section -->
<header>
<h1>Welcome to Babila Fofung's Website!</h1>
</header>
<!-- Link to CS Department -->
<nav>
<a href="http://www.cs.gsu.edu/" target="_blank">GSU Computer Science Department</a>
</nav>
<!-- Profile Section -->
<section id="profile">
<h2 style="text-align: center;">This is me!:</h2>
<div style="text-align: center;">
<img src="Professional Photo 2.jpg" class = "ProffesionalImage" alt="Your Photo">
</div>
</section>
<!--Start of Column for front page -->
<div class = "column">
<!--Start of first row for front page -->
<div class = "row">
<!-- Assignments and Projects Section with Zebra-striped table -->
<section id="assignments-projects">
<h2>Assignments/Classwork/Projects:</h2>
<table>
<!-- First row: Header -->
<tr>
<th>Assignments</th>
<th>Classwork</th>
<th>Projects</th>
<th>In Class Practice</th>
</tr>
<!-- Second row: Assignment 1 -->
<tr>
<td>Assignment 1 (This Page is HW1!)</td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW0/index.html">Classwork 0</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/tabledemo.html">Practice 1</td>
</tr>
<!-- Third row: Assignment 2 -->
<tr>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW1/ClassWork1.html">Classwork 1</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/IC3/oatmeal_cookies.html">Practice 2</td>
</tr>
</table>
</section>
</div>
<div class = "row">
<!-- Hobbies and Interests Section -->
<section id="hobbies-interests">
<h2>Hobbies and Interests</h2>
<ul>
<li>Movie Watcher</a></li>
<h5> Top 5 Favorite Live Action Movies: </h5>
<ol>
<li>Predator</li>
<li>Logan</li>
<li>Baby Driver</li>
<li>Kingsmen</li>
<li>Steve Jobs</li>
</ol>
<p></p>
<li> <a href = "https://www.adobe.com">Photoshopping</a></li>
<li> <a href = "https://www.barnesandnoble.com/">Book/Manga Reading </a></li>
</ul>
</section>
</div> <!--End of second row for front page -->
<!--Start of second row for front page -->
<div class = "row">
<!-- Education and Dream Job Section -->
<section id="education-dream-jobs">
<h2>My Education:</h2>
<ul>
<li>Shiloh High School</li>
<li>Georgia State University</li>
</ul>
<h2>Top 3 Dream Jobs:</h2>
<ol>
<li>Game Developer</li>
<li>Cybersecurity Analyst</li>
<li>Web Developer</li>
<li>It Help Desk</li>
<a href="Resume Fall September 2024.pdf" target="_blank">Personal Resume</a>
</ol>
</section>
</div> <!--End of second row for front page -->
</div> <!--End of first column for front page -->
<!-- Favorite Quote Section -->
<div class = "famousquote">
"The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt
</div>
<div class = "footer">
<!-- External Links Section -->
<section id="external-links">
<h2>Websites of Interest:</h2>
<a href="https://github.com/BillaVanilla?tab=repositories" target="_blank">
<img src = "Github.png" class = "githubpic" alt = "Github Pic"></a>
<a href="https://www.linkedin.com/in/babila-fofung-89377022b" target="_blank">
<img src = "Linkedln.png" class = "linkedlnpic" alt = "Linkedln Pic"></a>
</section>
</div></code>
<code><!-- Header Section -->
<header>
<h1>Welcome to Babila Fofung's Website!</h1>
</header>
<!-- Link to CS Department -->
<nav>
<a href="http://www.cs.gsu.edu/" target="_blank">GSU Computer Science Department</a>
</nav>
<!-- Profile Section -->
<section id="profile">
<h2 style="text-align: center;">This is me!:</h2>
<div style="text-align: center;">
<img src="Professional Photo 2.jpg" class = "ProffesionalImage" alt="Your Photo">
</div>
</section>
<!--Start of Column for front page -->
<div class = "column">
<!--Start of first row for front page -->
<div class = "row">
<!-- Assignments and Projects Section with Zebra-striped table -->
<section id="assignments-projects">
<h2>Assignments/Classwork/Projects:</h2>
<table>
<!-- First row: Header -->
<tr>
<th>Assignments</th>
<th>Classwork</th>
<th>Projects</th>
<th>In Class Practice</th>
</tr>
<!-- Second row: Assignment 1 -->
<tr>
<td>Assignment 1 (This Page is HW1!)</td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW0/index.html">Classwork 0</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/tabledemo.html">Practice 1</td>
</tr>
<!-- Third row: Assignment 2 -->
<tr>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW1/ClassWork1.html">Classwork 1</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/IC3/oatmeal_cookies.html">Practice 2</td>
</tr>
</table>
</section>
</div>
<div class = "row">
<!-- Hobbies and Interests Section -->
<section id="hobbies-interests">
<h2>Hobbies and Interests</h2>
<ul>
<li>Movie Watcher</a></li>
<h5> Top 5 Favorite Live Action Movies: </h5>
<ol>
<li>Predator</li>
<li>Logan</li>
<li>Baby Driver</li>
<li>Kingsmen</li>
<li>Steve Jobs</li>
</ol>
<p></p>
<li> <a href = "https://www.adobe.com">Photoshopping</a></li>
<li> <a href = "https://www.barnesandnoble.com/">Book/Manga Reading </a></li>
</ul>
</section>
</div> <!--End of second row for front page -->
<!--Start of second row for front page -->
<div class = "row">
<!-- Education and Dream Job Section -->
<section id="education-dream-jobs">
<h2>My Education:</h2>
<ul>
<li>Shiloh High School</li>
<li>Georgia State University</li>
</ul>
<h2>Top 3 Dream Jobs:</h2>
<ol>
<li>Game Developer</li>
<li>Cybersecurity Analyst</li>
<li>Web Developer</li>
<li>It Help Desk</li>
<a href="Resume Fall September 2024.pdf" target="_blank">Personal Resume</a>
</ol>
</section>
</div> <!--End of second row for front page -->
</div> <!--End of first column for front page -->
<!-- Favorite Quote Section -->
<div class = "famousquote">
"The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt
</div>
<div class = "footer">
<!-- External Links Section -->
<section id="external-links">
<h2>Websites of Interest:</h2>
<a href="https://github.com/BillaVanilla?tab=repositories" target="_blank">
<img src = "Github.png" class = "githubpic" alt = "Github Pic"></a>
<a href="https://www.linkedin.com/in/babila-fofung-89377022b" target="_blank">
<img src = "Linkedln.png" class = "linkedlnpic" alt = "Linkedln Pic"></a>
</section>
</div></code>
<!-- Header Section -->
<header>
<h1>Welcome to Babila Fofung's Website!</h1>
</header>
<!-- Link to CS Department -->
<nav>
<a href="http://www.cs.gsu.edu/" target="_blank">GSU Computer Science Department</a>
</nav>
<!-- Profile Section -->
<section id="profile">
<h2 style="text-align: center;">This is me!:</h2>
<div style="text-align: center;">
<img src="Professional Photo 2.jpg" class = "ProffesionalImage" alt="Your Photo">
</div>
</section>
<!--Start of Column for front page -->
<div class = "column">
<!--Start of first row for front page -->
<div class = "row">
<!-- Assignments and Projects Section with Zebra-striped table -->
<section id="assignments-projects">
<h2>Assignments/Classwork/Projects:</h2>
<table>
<!-- First row: Header -->
<tr>
<th>Assignments</th>
<th>Classwork</th>
<th>Projects</th>
<th>In Class Practice</th>
</tr>
<!-- Second row: Assignment 1 -->
<tr>
<td>Assignment 1 (This Page is HW1!)</td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW0/index.html">Classwork 0</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/tabledemo.html">Practice 1</td>
</tr>
<!-- Third row: Assignment 2 -->
<tr>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW1/ClassWork1.html">Classwork 1</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/IC3/oatmeal_cookies.html">Practice 2</td>
</tr>
</table>
</section>
</div>
<div class = "row">
<!-- Hobbies and Interests Section -->
<section id="hobbies-interests">
<h2>Hobbies and Interests</h2>
<ul>
<li>Movie Watcher</a></li>
<h5> Top 5 Favorite Live Action Movies: </h5>
<ol>
<li>Predator</li>
<li>Logan</li>
<li>Baby Driver</li>
<li>Kingsmen</li>
<li>Steve Jobs</li>
</ol>
<p></p>
<li> <a href = "https://www.adobe.com">Photoshopping</a></li>
<li> <a href = "https://www.barnesandnoble.com/">Book/Manga Reading </a></li>
</ul>
</section>
</div> <!--End of second row for front page -->
<!--Start of second row for front page -->
<div class = "row">
<!-- Education and Dream Job Section -->
<section id="education-dream-jobs">
<h2>My Education:</h2>
<ul>
<li>Shiloh High School</li>
<li>Georgia State University</li>
</ul>
<h2>Top 3 Dream Jobs:</h2>
<ol>
<li>Game Developer</li>
<li>Cybersecurity Analyst</li>
<li>Web Developer</li>
<li>It Help Desk</li>
<a href="Resume Fall September 2024.pdf" target="_blank">Personal Resume</a>
</ol>
</section>
</div> <!--End of second row for front page -->
</div> <!--End of first column for front page -->
<!-- Favorite Quote Section -->
<div class = "famousquote">
"The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt
</div>
<div class = "footer">
<!-- External Links Section -->
<section id="external-links">
<h2>Websites of Interest:</h2>
<a href="https://github.com/BillaVanilla?tab=repositories" target="_blank">
<img src = "Github.png" class = "githubpic" alt = "Github Pic"></a>
<a href="https://www.linkedin.com/in/babila-fofung-89377022b" target="_blank">
<img src = "Linkedln.png" class = "linkedlnpic" alt = "Linkedln Pic"></a>
</section>
</div>
New contributor
Billa Vanilla is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
Don’t leave a space between tr:nth-childand (even), but make it tr:nth-child(even). If you fix that it works:
<code>table{
width: 40%;
text-align: center;
}
table, th, td{
border: 3px solid white;
border-collapse: collapse;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {background-color: red;}
tr:hover td {background-color: orange;}</code>
<code>table{
width: 40%;
text-align: center;
}
table, th, td{
border: 3px solid white;
border-collapse: collapse;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {background-color: red;}
tr:hover td {background-color: orange;}</code>
table{
width: 40%;
text-align: center;
}
table, th, td{
border: 3px solid white;
border-collapse: collapse;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {background-color: red;}
tr:hover td {background-color: orange;}<code><!-- Header Section -->
<header>
<h1>Welcome to Babila Fofung's Website!</h1>
</header>
<!-- Link to CS Department -->
<nav>
<a href="http://www.cs.gsu.edu/" target="_blank">GSU Computer Science Department</a>
</nav>
<!-- Profile Section -->
<section id="profile">
<h2 style="text-align: center;">This is me!:</h2>
<div style="text-align: center;">
<img src="Professional Photo 2.jpg" class = "ProffesionalImage" alt="Your Photo">
</div>
</section>
<!--Start of Column for front page -->
<div class = "column">
<!--Start of first row for front page -->
<div class = "row">
<!-- Assignments and Projects Section with Zebra-striped table -->
<section id="assignments-projects">
<h2>Assignments/Classwork/Projects:</h2>
<table>
<!-- First row: Header -->
<tr>
<th>Assignments</th>
<th>Classwork</th>
<th>Projects</th>
<th>In Class Practice</th>
</tr>
<!-- Second row: Assignment 1 -->
<tr>
<td>Assignment 1 (This Page is HW1!)</td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW0/index.html">Classwork 0</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/tabledemo.html">Practice 1</td>
</tr>
<!-- Third row: Assignment 2 -->
<tr>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW1/ClassWork1.html">Classwork 1</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/IC3/oatmeal_cookies.html">Practice 2</td>
</tr>
</table>
</section>
</div>
<div class = "row">
<!-- Hobbies and Interests Section -->
<section id="hobbies-interests">
<h2>Hobbies and Interests</h2>
<ul>
<li>Movie Watcher</a></li>
<h5> Top 5 Favorite Live Action Movies: </h5>
<ol>
<li>Predator</li>
<li>Logan</li>
<li>Baby Driver</li>
<li>Kingsmen</li>
<li>Steve Jobs</li>
</ol>
<p></p>
<li> <a href = "https://www.adobe.com">Photoshopping</a></li>
<li> <a href = "https://www.barnesandnoble.com/">Book/Manga Reading </a></li>
</ul>
</section>
</div> <!--End of second row for front page -->
<!--Start of second row for front page -->
<div class = "row">
<!-- Education and Dream Job Section -->
<section id="education-dream-jobs">
<h2>My Education:</h2>
<ul>
<li>Shiloh High School</li>
<li>Georgia State University</li>
</ul>
<h2>Top 3 Dream Jobs:</h2>
<ol>
<li>Game Developer</li>
<li>Cybersecurity Analyst</li>
<li>Web Developer</li>
<li>It Help Desk</li>
<a href="Resume Fall September 2024.pdf" target="_blank">Personal Resume</a>
</ol>
</section>
</div> <!--End of second row for front page -->
</div> <!--End of first column for front page -->
<!-- Favorite Quote Section -->
<div class = "famousquote">
"The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt
</div>
<div class = "footer">
<!-- External Links Section -->
<section id="external-links">
<h2>Websites of Interest:</h2>
<a href="https://github.com/BillaVanilla?tab=repositories" target="_blank">
<img src = "Github.png" class = "githubpic" alt = "Github Pic"></a>
<a href="https://www.linkedin.com/in/babila-fofung-89377022b" target="_blank">
<img src = "Linkedln.png" class = "linkedlnpic" alt = "Linkedln Pic"></a>
</section>
</div></code>
<code><!-- Header Section -->
<header>
<h1>Welcome to Babila Fofung's Website!</h1>
</header>
<!-- Link to CS Department -->
<nav>
<a href="http://www.cs.gsu.edu/" target="_blank">GSU Computer Science Department</a>
</nav>
<!-- Profile Section -->
<section id="profile">
<h2 style="text-align: center;">This is me!:</h2>
<div style="text-align: center;">
<img src="Professional Photo 2.jpg" class = "ProffesionalImage" alt="Your Photo">
</div>
</section>
<!--Start of Column for front page -->
<div class = "column">
<!--Start of first row for front page -->
<div class = "row">
<!-- Assignments and Projects Section with Zebra-striped table -->
<section id="assignments-projects">
<h2>Assignments/Classwork/Projects:</h2>
<table>
<!-- First row: Header -->
<tr>
<th>Assignments</th>
<th>Classwork</th>
<th>Projects</th>
<th>In Class Practice</th>
</tr>
<!-- Second row: Assignment 1 -->
<tr>
<td>Assignment 1 (This Page is HW1!)</td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW0/index.html">Classwork 0</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/tabledemo.html">Practice 1</td>
</tr>
<!-- Third row: Assignment 2 -->
<tr>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW1/ClassWork1.html">Classwork 1</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/IC3/oatmeal_cookies.html">Practice 2</td>
</tr>
</table>
</section>
</div>
<div class = "row">
<!-- Hobbies and Interests Section -->
<section id="hobbies-interests">
<h2>Hobbies and Interests</h2>
<ul>
<li>Movie Watcher</a></li>
<h5> Top 5 Favorite Live Action Movies: </h5>
<ol>
<li>Predator</li>
<li>Logan</li>
<li>Baby Driver</li>
<li>Kingsmen</li>
<li>Steve Jobs</li>
</ol>
<p></p>
<li> <a href = "https://www.adobe.com">Photoshopping</a></li>
<li> <a href = "https://www.barnesandnoble.com/">Book/Manga Reading </a></li>
</ul>
</section>
</div> <!--End of second row for front page -->
<!--Start of second row for front page -->
<div class = "row">
<!-- Education and Dream Job Section -->
<section id="education-dream-jobs">
<h2>My Education:</h2>
<ul>
<li>Shiloh High School</li>
<li>Georgia State University</li>
</ul>
<h2>Top 3 Dream Jobs:</h2>
<ol>
<li>Game Developer</li>
<li>Cybersecurity Analyst</li>
<li>Web Developer</li>
<li>It Help Desk</li>
<a href="Resume Fall September 2024.pdf" target="_blank">Personal Resume</a>
</ol>
</section>
</div> <!--End of second row for front page -->
</div> <!--End of first column for front page -->
<!-- Favorite Quote Section -->
<div class = "famousquote">
"The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt
</div>
<div class = "footer">
<!-- External Links Section -->
<section id="external-links">
<h2>Websites of Interest:</h2>
<a href="https://github.com/BillaVanilla?tab=repositories" target="_blank">
<img src = "Github.png" class = "githubpic" alt = "Github Pic"></a>
<a href="https://www.linkedin.com/in/babila-fofung-89377022b" target="_blank">
<img src = "Linkedln.png" class = "linkedlnpic" alt = "Linkedln Pic"></a>
</section>
</div></code>
<!-- Header Section -->
<header>
<h1>Welcome to Babila Fofung's Website!</h1>
</header>
<!-- Link to CS Department -->
<nav>
<a href="http://www.cs.gsu.edu/" target="_blank">GSU Computer Science Department</a>
</nav>
<!-- Profile Section -->
<section id="profile">
<h2 style="text-align: center;">This is me!:</h2>
<div style="text-align: center;">
<img src="Professional Photo 2.jpg" class = "ProffesionalImage" alt="Your Photo">
</div>
</section>
<!--Start of Column for front page -->
<div class = "column">
<!--Start of first row for front page -->
<div class = "row">
<!-- Assignments and Projects Section with Zebra-striped table -->
<section id="assignments-projects">
<h2>Assignments/Classwork/Projects:</h2>
<table>
<!-- First row: Header -->
<tr>
<th>Assignments</th>
<th>Classwork</th>
<th>Projects</th>
<th>In Class Practice</th>
</tr>
<!-- Second row: Assignment 1 -->
<tr>
<td>Assignment 1 (This Page is HW1!)</td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW0/index.html">Classwork 0</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/tabledemo.html">Practice 1</td>
</tr>
<!-- Third row: Assignment 2 -->
<tr>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW1/ClassWork1.html">Classwork 1</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/IC3/oatmeal_cookies.html">Practice 2</td>
</tr>
</table>
</section>
</div>
<div class = "row">
<!-- Hobbies and Interests Section -->
<section id="hobbies-interests">
<h2>Hobbies and Interests</h2>
<ul>
<li>Movie Watcher</a></li>
<h5> Top 5 Favorite Live Action Movies: </h5>
<ol>
<li>Predator</li>
<li>Logan</li>
<li>Baby Driver</li>
<li>Kingsmen</li>
<li>Steve Jobs</li>
</ol>
<p></p>
<li> <a href = "https://www.adobe.com">Photoshopping</a></li>
<li> <a href = "https://www.barnesandnoble.com/">Book/Manga Reading </a></li>
</ul>
</section>
</div> <!--End of second row for front page -->
<!--Start of second row for front page -->
<div class = "row">
<!-- Education and Dream Job Section -->
<section id="education-dream-jobs">
<h2>My Education:</h2>
<ul>
<li>Shiloh High School</li>
<li>Georgia State University</li>
</ul>
<h2>Top 3 Dream Jobs:</h2>
<ol>
<li>Game Developer</li>
<li>Cybersecurity Analyst</li>
<li>Web Developer</li>
<li>It Help Desk</li>
<a href="Resume Fall September 2024.pdf" target="_blank">Personal Resume</a>
</ol>
</section>
</div> <!--End of second row for front page -->
</div> <!--End of first column for front page -->
<!-- Favorite Quote Section -->
<div class = "famousquote">
"The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt
</div>
<div class = "footer">
<!-- External Links Section -->
<section id="external-links">
<h2>Websites of Interest:</h2>
<a href="https://github.com/BillaVanilla?tab=repositories" target="_blank">
<img src = "Github.png" class = "githubpic" alt = "Github Pic"></a>
<a href="https://www.linkedin.com/in/babila-fofung-89377022b" target="_blank">
<img src = "Linkedln.png" class = "linkedlnpic" alt = "Linkedln Pic"></a>
</section>
</div>