Isibella Posted February 11, 2012 Share Posted February 11, 2012 (edited) I am Currently having Issues creating this XHTML table for my next assignment. My professor wants me to be able to create this table as shown in the picture, using XHTML code. Im really struggling with the "colspan" and "rowspan" attributes to apply to this code. and to be able to create this table; as shown in the picture. Can anyone with good knowledge in XHTML pleasse help Edited February 11, 2012 by Isibella Link to comment Share on other sites More sharing options...
Ingolme Posted February 11, 2012 Share Posted February 11, 2012 There's no way you'll get an L-shaped table cell. Table cells are always rectangular. With a bit of CSS you could create a separate table inside one of the cells and move it to the bottom right of the cell. 1 Link to comment Share on other sites More sharing options...
fikiwan Posted February 11, 2012 Share Posted February 11, 2012 It's my experiment , perhaps no good but I hope can help U... . @fikiwan <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--.mode {font-size: 24px;font-weight: bold;font:Tahoma}.jarak{height:200px;}.jarak_1{height:0px;}.jarak1{margin-top:-100px;margin-left:102px;}.jarak2{margin-left:102px;margin-top:-107px;}.jarak3{height:30px;}.lebar{height:30px;}.nomor{font-size:30px;font-family:Tahoma;}.nomor1{font-family:Tahoma;font-size:24px;margin-left:40px;margin-top:125px;}.nomor3{font-family:Tahoma;font-size:24px;margin-left:40px;margin-top:54px;}--></style></head><body><table align="center" width="50%" border="1" cellspacing="0" cellpadding="0" "> <tr> <td align="center"><span class="mode">CREATE THIS</span> </td> </tr> <tr> <td class="jarak" ><p class="nomor1">5</p> <table class="jarak1" width="85%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000"> <tr> <td class="lebar"><span class="nomor">c1</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c2</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c3</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c4</span></td> </tr> <tr> <td class="lebar" ><span class="nomor">c5</span></td> </tr> </table></td> </tr> <tr> <td class="jarak3"> </td> </tr> <tr> <td class="jarak_1"><p class="nomor3">4</p> <table class="jarak2"width="85%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000"> <tr> <td class="lebar"><span class="nomor">c1</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c2</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c3</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c4</span></td> </tr> </table></td> </tr></table></body></html> 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 11, 2012 Share Posted February 11, 2012 (edited) You don't require two tables, you just need to use border-collapse: and apply/remove borders to cells to achieve the same end result. Edited February 11, 2012 by dsonesuk 1 Link to comment Share on other sites More sharing options...
Isibella Posted February 11, 2012 Author Share Posted February 11, 2012 @fikiwan <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--.mode {font-size: 24px;font-weight: bold;font:Tahoma}.jarak{height:200px;}.jarak_1{height:0px;}.jarak1{margin-top:-100px;margin-left:102px;}.jarak2{margin-left:102px;margin-top:-107px;}.jarak3{height:30px;}.lebar{height:30px;}.nomor{font-size:30px;font-family:Tahoma;}.nomor1{font-family:Tahoma;font-size:24px;margin-left:40px;margin-top:125px;}.nomor3{font-family:Tahoma;font-size:24px;margin-left:40px;margin-top:54px;}--></style></head><body><table align="center" width="50%" border="1" cellspacing="0" cellpadding="0" "> <tr> <td align="center"><span class="mode">CREATE THIS</span> </td> </tr> <tr> <td class="jarak" ><p class="nomor1">5</p> <table class="jarak1" width="85%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000"> <tr> <td class="lebar"><span class="nomor">c1</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c2</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c3</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c4</span></td> </tr> <tr> <td class="lebar" ><span class="nomor">c5</span></td> </tr> </table></td> </tr> <tr> <td class="jarak3"> </td> </tr> <tr> <td class="jarak_1"><p class="nomor3">4</p> <table class="jarak2"width="85%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000"> <tr> <td class="lebar"><span class="nomor">c1</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c2</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c3</span></td> </tr> <tr> <td class="lebar"><span class="nomor">c4</span></td> </tr> </table></td> </tr></table></body></html> There's no way you'll get an L-shaped table cell. Table cells are always rectangular. With a bit of CSS you could create a separate table inside one of the cells and move it to the bottom right of the cell. Wow fikiwan that looks amazing , however im not required to do this in css. Is there a way to do it with out using css. Foxy i understand there is no l-shape in tables, but i was thinking mabye there would be away to span it if possible, with out using css. I've been working on it and so far my code look like this in the file below. Still not the best but trying to make it look like the originnal picture. btw the drawing is kinda crappy it looks better once you generate the code. Link to comment Share on other sites More sharing options...
boen_robot Posted February 12, 2012 Share Posted February 12, 2012 As dsonesuk hinted, you can specify borders to make the table look L-shaped, even though that's, strictly speaking, impossible.So, something like: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>L-shaped table</title> <style type="text/css"> table {border-spacing:0;} td {border:1px solid black;} .left-merged {border-left:none;} .right-merged {border-right:none;} </style> </head> <body> <table> <tr> <td rowspan="3" class="right-merged">Left</td> <td class="left-merged">Right1</td> </tr> <tr> <td>Right2</td> </tr> <tr> <td>Right3</td> </tr> </table> </body></html> however im not required to do this in cssNot required is not the same thing as forbidden . 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2012 Share Posted February 12, 2012 The only way I can see this being done without the use of css, and with text appearing in blank left hand side of 5 cell rows, is by using two tables, one without borders on left, obviously the other with borders on right. You will!, end up with double borders showing in some browser, you may be able to use 'frame' attribute to help remove non required borders from showing in these browsers. IT is very much harder to achieve a design like this, that will look identical in all browsers, without the use of css. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2012 Share Posted February 12, 2012 Right!, because different browser show different borders, and IF you are allowed too, I suggest using cellspacing="1" with a background colour (black for instance) to show between spacing, the problem with this is you have to use, for instance a white background colour for each cell, but the results are consistent in all browsers, but you still end up with double border on bottom and left of five row table. Link to comment Share on other sites More sharing options...
Luoslav Posted April 20, 2014 Share Posted April 20, 2014 Hello, Im helping to my friend with school project but I struggle with tables. I need to achieve this: https://www.dropbox.com/s/1dmul4ipef6v1gp/2014-04-19_212753.jpg It must be one solid table. I made something similiar to this but it has only 1 row: <table> <tr> <td rowspan="7">1</td> <td>2</td> <td rowspan="7">3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr></table> Please how to expand it to add second row? Link to comment Share on other sites More sharing options...
davej Posted April 20, 2014 Share Posted April 20, 2014 Simply duplicate what you have. <!DOCTYPE html><html lang="sk"><head><meta charset="utf-8"><title>rowspan</title><style>table{border:3px ridge #aaa;}td,th{width:200px;height:20px;border:3px ridge #ccc;text-align:center;}.photo{width:160px;}</style></head><body><table> <tr> <td rowspan="7" class="photo">1</td> <td>2</td> <td rowspan="7" class="photo">3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td rowspan="7" class="photo">1</td> <td>2</td> <td rowspan="7" class="photo">3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr></table></body></html> 1 Link to comment Share on other sites More sharing options...
Luoslav Posted April 20, 2014 Share Posted April 20, 2014 (edited) Thank you very much  edit//  sorry for bothering you but I dont know how to achieve this : https://www.dropbox.com/s/mbc2e81pn6uzjzr/2014-04-20_152058.jpg  all I have now is this: <html lang="sk"> <HEAD> <TITLE>moj prvy web</TITLE><meta charset="utf-8"> </HEAD><style> p{ color:blue;} td{width:250px;text-align:left;}.photo{width:160px;}h3{ text-align:center; color:blue}</style> <BODY BACKGROUND="./logo.jpg"> <h1 align="center" style="color:#900">HC Košice</h1> <table align="center"> <tr> <td rowspan="7" class="photo"><img src="jpg/lipovsky.jpg"></td> <td><h3>Miroslav Lipovský</h3></td> <td rowspan="7" class="photo"><img src="jpg/zagyi.jpg"></td> <td><h3>Tomáš Zagyi</h3></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td><p style="color:blue">Narodený: 19.11.1976</p></td> <td><p>Narodený: 23.1.1986</p></td> </tr> <tr> <td><p style="color:blue">Výška: 174 cm</p></td> <td><p>Výška: 177 cm</p></td> </tr> <tr> <td><p style="color:blue">Váha: 78 kg</p></td> <td><p>Váha: 70 kg</td> </tr> <tr> <td><p style="color:blue">Hokejka: ľavák</p></td> <td><p>Hokejka: Ľavák</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td rowspan="7" class="photo"><img src="jpg/faith.jpg"></td> <td><h3>Juraj Faith</h3></td> <td rowspan="7" class="photo"><img src="jpg/pleva.jpg"></td> <td><h3>Ján Pleva</h3></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td><p>Narodený: 14.3.1976</p></td> <td><p>Narodený: 7.9.1974</p></td> </tr> <tr> <td><p>Výška: 174 cm</p></td> <td><p>Výška: 178 cm</p></td> </tr> <tr> <td><p>Váha: 82 kg</p></td> <td><p>Váha: 83 kg</p></td> </tr> <tr> <td><p>Hokejka: ľavák</p></td> <td><p>Hokejka: ľavák</p></td> </tr> <tr> <td> </td> <td> </td> </tr></table> </BODY></HTML> Btw whats the simplest way to achieve this: https://www.dropbox.com/s/3low6vnuz60jb7n/2014-04-19_212820.jpg ? Edited April 20, 2014 by Luoslav Link to comment Share on other sites More sharing options...
Luoslav Posted April 20, 2014 Share Posted April 20, 2014 so i figured out how to configure that table but Im still struggling with https://www.dropbox.com/s/3low6vnuz60jb7n/2014-04-19_212820.jpg :/ Some advice? Link to comment Share on other sites More sharing options...
davej Posted April 20, 2014 Share Posted April 20, 2014 Perhaps something like... <!DOCTYPE html><html lang="sk"><head><meta charset="utf-8"><title>cascade</title><style>*{margin:0px;padding:0px;}#wrap{width:800px;margin:20px auto;}#pcascade{overflow:hidden;background-color:#ccf;}img.cascade{width:150px;height:200px;display: block;float:left;margin:3px;}#pcascade h3{font-family:"Times New Roman",Times,serif;font-size:20pt;font-weight:normal;color:#00a;margin: 50px;/*border:1px dotted #000;*/}.clear{clear:both}</style></head><body><div id="wrap"> <div id="pcascade"><img src="#" class="cascade"><h3 style="margin-top:0">Miroslav Lipovsky</h3><img src="#" class="cascade"><h3>Tomas Zagyi</h3><img src="#" class="cascade"><h3>Juraj Faith</h3><img src="#" class="cascade"><h3>Jan Pleva</h3></div></div><br class="clear"></body></html> 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now