In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
I copied CSS freely from MDN and have an issue to resolve. I am getting what looks like double borders in some places so this needs something to make all borders the same.
Being a web dev in higher ed, we have to deal with tables like these all the time! For the decade I have been doing this, I still don't know if I have come up with an ideal solution.
🔥🔥🔥🎉🎉🎉 Because you have headers in columns and rows, I'd be tempted to add a scope to those <th scope="row">. But other than that, I think you've got it! Great work 😁
🔥🔥🔥🎉🎉🎉 OK, good first pass at this! Every row should have the same number of cells. Looks like most rows have 2 cells, so the first row should have td colspan="2" instead of 5. Great start!
🔥🔥🔥🔥🔥🔥 Lovely job! What happens if they eat lunch every day? 🤣 You'll want to revisit this in later days as we talk about more complex headers for tables. You have the right idea here, but there's some more HTML needed to properly communicate these headers. Great stuff as always!
Ooh, you got an :nth-child in there! 🔥🎉🔥🎉🔥🎉 Great start on this - the next challenge is similar, but the information is grouped somewhat differently. Looking forward to what you might do next!
🔥🎉🔥🎉🔥🎉 I laughed at your comment about <time> -- it may not be useful, I agree! 😁 You've done an excellent job with colspan and rowspan. While quotes are not necessarily required in HTML around attribute values, they are something of a convention. You may want to revisit this pen in a few days once we've gone through more information about headers, captions, and designating groups of columns. Thanks for sharing!
I have been following your great work since April 6. I appreciate your sharing useful information accurately and doing it 30 times in a month! Both require hard work.
Thank you! Erika and I have learned so much in this process. Perhaps the biggest lesson learned is that 30 days may be about 15 days too many. 🤣🤣🤣 However, we are thinking about what comes next. Thank you so much for reading and participating!
🔥🎉🔥🎉🔥🎉 Nicely done! Don't forget your closing </table> tag. Do you think you could combine your table a bit more as maeyler did in his pen above? Thanks for sharing!
🔥🎉🔥🎉🔥🎉🔥🎉🔥🎉🔥🎉 Love it!!! Love the CSS treatment for cells where you have no data. You rightly included the cell despite a lack of information. Great job!
https://codepen.io/romola/pen/yLMjKgX?editors=1100
I copied CSS freely from MDN and have an issue to resolve. I am getting what looks like double borders in some places so this needs something to make all borders the same.
table {
border-collapse: collapse;
}
This is what gives you a single border within the table. Otherwise you have double borders everywhere.
https://codepen.io/kajal-28/pen/jOBaBxr
🔥🔥🔥🔥🔥🔥 Looks great, nice job! You can always move that inline style out using a class. 😁
Yeah 🤠👍
https://codepen.io/kldickenson/pen/WNRqXGK
Being a web dev in higher ed, we have to deal with tables like these all the time! For the decade I have been doing this, I still don't know if I have come up with an ideal solution.
🔥🔥🔥🎉🎉🎉 Because you have headers in columns and rows, I'd be tempted to add a scope to those <th scope="row">. But other than that, I think you've got it! Great work 😁
https://codepen.io/kadie7/pen/mdRZBxP?editors=1000
🔥🔥🔥🎉🎉🎉 OK, good first pass at this! Every row should have the same number of cells. Looks like most rows have 2 cells, so the first row should have td colspan="2" instead of 5. Great start!
https://codepen.io/jarchaff/pen/XWpOjEQ?editors=1100
🔥🔥🔥🔥🔥🔥 Lovely job! What happens if they eat lunch every day? 🤣 You'll want to revisit this in later days as we talk about more complex headers for tables. You have the right idea here, but there's some more HTML needed to properly communicate these headers. Great stuff as always!
https://codepen.io/Solobachi/pen/XWpoRQa
Ooh, you got an :nth-child in there! 🔥🎉🔥🎉🔥🎉 Great start on this - the next challenge is similar, but the information is grouped somewhat differently. Looking forward to what you might do next!
https://codepen.io/maeyler/pen/KKabpqw
🔥🎉🔥🎉🔥🎉 I laughed at your comment about <time> -- it may not be useful, I agree! 😁 You've done an excellent job with colspan and rowspan. While quotes are not necessarily required in HTML around attribute values, they are something of a convention. You may want to revisit this pen in a few days once we've gone through more information about headers, captions, and designating groups of columns. Thanks for sharing!
I have been following your great work since April 6. I appreciate your sharing useful information accurately and doing it 30 times in a month! Both require hard work.
Thank you! Erika and I have learned so much in this process. Perhaps the biggest lesson learned is that 30 days may be about 15 days too many. 🤣🤣🤣 However, we are thinking about what comes next. Thank you so much for reading and participating!
https://codepen.io/kelsey-van-ert/pen/OJWryON.
🔥🎉🔥🎉🔥🎉 Nicely done! Don't forget your closing </table> tag. Do you think you could combine your table a bit more as maeyler did in his pen above? Thanks for sharing!
🔥🎉🔥🎉🔥🎉🔥🎉🔥🎉🔥🎉 Love it!!! Love the CSS treatment for cells where you have no data. You rightly included the cell despite a lack of information. Great job!