Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
James Bryer
656 PointsHow to make one cell on a table larger?
I am making a contact form and want the last cell in the table to be significantly larger than the rest. How do i do this?
Plus how do i change the border radius on the table it wont work!
<form> <table border="0"> <tr> <td align="right">Your Name: </td> <td align="left"><input type="text" name="first" /></td> </tr> <tr> <td align="right"> Your Email: </td> <td align="left"><input type="text" name="last" /></td> </tr> <tr> <td align="right">Project Bugdet: </td> <td align="left"><input type="text" name="email" /></td> </tr> <tr> <td align="right"> Project Details </td> <td align="left"><input type="text" name="email" / ></td> </tr> </table> </form>
2 Answers
shervin mashayekh
Courses Plus Student 11,915 Pointsfor the first part of your question i should say tables don't work like that you can't just make one cell larger than the others if you change one cell the whole column would change to achieving that you can make a larger <td> for your last cell and then align the upper cells to left , or you can use colspan attribute to span a single cell.
and for the second question you can apply this method which is looking for each corner cell and applying the radius for that corner to each of those cells, like so:
table > :first-child > tr:first-of-type > :first-child { border-radius: 5px 0 0 0 }
table > :first-child > tr:first-of-type > :last-child { border-radius: 0 5px 0 0 }
table > :last-child > tr:last-of-type > :first-child { border-radius: 0 0 0 5px }
table > :last-child > tr:last-of-type > :last-child { border-radius: 0 0 5px 0 }
Now, this works all fine and dandy for your average table which is a perfect grid of rows and columns with no random row-spans or column-spans,but if you have them you can try using attribute selectors. Maybe something like this:
table > :last-child > tr:last-of-type > :only-child { border-radius: 0 0 0 5px }
table > :first-child > tr:first-of-type > :last-child[rowspan="2"]{border-radius: 0 5px 5px 0}
I make a simple pen for you in Codepen to see what i mean and play around with it
James Bryer
656 Pointsthanks, using a form now!
James Barnett
39,199 PointsJames Barnett
39,199 PointsThose CSS selectors look like crazy town selectors
shervin mashayekh
Courses Plus Student 11,915 Pointsshervin mashayekh
Courses Plus Student 11,915 Pointsactually as i was writing them i was thinking the same thing..!!:D
James Barnett
39,199 PointsJames Barnett
39,199 PointsI think it's a case where using a few classes would be the better choice.