Hi,
I'm trying to style a table. This is the HTML (which I have to leave unaltered):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ultimate Frisbee - Teams</title> <link rel="stylesheet" href="css/hw1.css"> </head> <body> <header> <h1>Ulimate Frisbee Teams</h1> <nav> <a href="index.html">Home</a> <a href="history.html" class = "active">Teams</a> <a href="history.html">History</a> <a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a> </nav> </header> <main> <aside class = "left"> <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (<a href="http://creativecommons.org/licenses/by-sa/2.0" rel="nofollow">http://creativecommons.org/licenses/by-sa/2.0</a>)], via Wikimedia Commons"/> </a> <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a> <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg" alt="Ultimate Frisbee"></a> </aside> <section class = "right"> <h2>College Teams</h2> <p>This is not meant to be a comprehensive list of all the teams, just a sampling from around the United States. I focused on the ones that I though had cools names.</p> <table> <tr><th>Team Name</th> <th>Location</th> <th>League Type</th></tr> <tr> <td>Afterburn - Air Force</td> <td>Colorado</td> <td>Men's</td> </tr> <tr> <td>Cold Front (Bates College)</td> <td>Maine</td> <td>Women's</td> </tr> <tr> <td>Disco Inferno (Brown University)</td> <td>Rhode Island</td> <td>Women's</td> </tr> <tr> <td>Bad Habit (Catholic University)</td> <td>Washington DC</td> <td>Men's</td> </tr> <tr> <td>Jive Turkeys (Dickinson College)</td> <td>Pennsylvania</td> <td>Both</td> </tr> <tr> <td>Knights of the Round Disc(Longwood College)</td> <td>Virginia</td> <td>Men's</td> </tr> <tr> <td>Ninjas (University of Minnesota)</td> <td>Minnesota</td> <td>Women's</td> </tr> <tr> <td>Flying Squirrels (Hendrix College)</td> <td>Arizona</td> <td>Men's</td> </tr> <tr> <td>Superfly (Yale)</td> <td>Connecticut</td> <td>Men's</td> </tr> <tr> <td>Flywheel (University of Michigan</td> <td>Michigan</td> <td>Women's</td> </tr> </table> </section> </main> </body> </html>
and here is the CSS I've created:
body{ margin: 2%; padding: 2%; font-size: 110%; } header{ background: #A0A3A3; padding-top: 1%; padding-bottom: 1%; background-image: url(../images/flywheel.jpg); background-repeat: no-repeat; background-size: cover; font-size: 130%; border: none; } h1{ text-align: center; font-variant: small-caps; color: #FFFFFF; font-family: arial, serif, century; border-radius: 8px; } nav{ font-variant: normal; font-size: 120%; font-weight: bold; color: #F9E6E6; text-align: center; } nav a{ display: inline-block; background-color: #FFFFFF; opacity: 0.5; filter: alpha (opacity=40); text-decoration: none; width: 15%; padding: 13px; margin: 25px; border-radius: 7%; } nav a:hover{ background: #B3B3B3; color: #0006CC; } nav input:focus{ background: #B3B3B3; color: #FFFFFF; } nav a:active{ border: 3px solid #000000; } section{ overflow: hidden; margin-left: 25px; } section.right h2{ margin-left: 25px; } p{ margin-left:25px; } aside{ float: left; text-align: center; width: 250px; height: 100%; background-color: #697C44 } aside img{ margin: 1em 0; max-width: 200px; border-style: solid; } main h2{ display: inline-block; margin-top: 25px; } table{ margin-left: 150px; border: 3px 3px 5px 3px solid black; width: 70%; border-collapse: collapse; border-spacing: 0; font: normal Arial, "sans-serif"; } .right th .right tr{ opacity: 0.6; } .right tr: hover { opacity: 1.0; } .right td{ color: #FFFFFF; background-color: #697C67; margin-left: 25px; padding: 8px; } .right th{ background-color: #697C44; padding: 10px; }
Trouble is that I cannot do the following - or at least it doesn't seem to be working with what I'm hoping is the right code:
1) I cannot place a border around the table header (including a thicker border along the th bottom.
2) I cannot text-align column one (inc th text) to the left.
3) same as 2 but I cannot align column 2 and 3 (inc th text)to the centre
4) I cannot seem to effect border radius on the top two corners of the table.
Can anybody offer pointers / suggestions as to what I've done wrong and ways I may remedy?
Many thanks in advance,
Chris
Anyone?
Anyone?
More homework? :)
{Border-collapse:collapse;} can mess up some borders. Use border-spacing if there's a problem.
Your instructor writes some ugly code.
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ html { padding: 0;} body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0;} p { font-size: 1em;} /* end boilerplate */ table { border: 3px solid black; border-bottom: 5px solid black; border-radius: 7px 7px 0 0; border-spacing: 0; margin: 1em auto;} tr:first-child th { border-bottom: 5px solid black;} tr td, tr th { padding: 0.5em 1em; text-align: center;} tr td:first-child, tr:first-child th:first-child { text-align: left;} /*]]>*/ </style> </head> <body> <section class = "right"> <!-- Really dumb class name. What if you want it on the left? --> <h2>College Teams</h2> <p>This is not meant to be a comprehensive list of all the teams, just a sampling from around the United States. I focused on the ones that I though[sic] had cools names.</p> <table> <!-- Where is thead? --> <tr> <th>Team Name</th> <th>Location</th> <th>League Type</th> </tr> <tr> <td>Afterburn - Air Force</td> <td>Colorado</td> <td>Men's</td> </tr> <tr> <td>Cold Front (Bates College)</td> <td>Maine</td> <td>Women's</td> </tr> <tr> <td>Disco Inferno (Brown University)</td> <td>Rhode Island</td> <td>Women's</td> </tr> <tr> <td>Bad Habit (Catholic University)</td> <td>Washington DC</td> <td>Men's</td> </tr> <tr> <td>Jive Turkeys (Dickinson College)</td> <td>Pennsylvania</td> <td>Both</td> </tr> <tr> <td>Knights of the Round Disc(Longwood College)</td> <td>Virginia</td> <td>Men's</td> </tr> <tr> <td>Ninjas (University of Minnesota)</td> <td>Minnesota</td> <td>Women's</td> </tr> <tr> <td>Flying Squirrels (Hendrix College)</td> <td>Arizona</td> <td>Men's</td> </tr> <tr> <td>Superfly (Yale)</td> <td>Connecticut</td> <td>Men's</td> </tr> <tr> <td>Flywheel (University of Michigan</td> <td>Michigan</td> <td>Women's</td> </tr> </table> </section> </body> </html>
gary
Now it's time for football.