Isibella 0 Posted February 11, 2012 Report 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 Quote Link to post Share on other sites
Ingolme 1,039 Posted February 11, 2012 Report 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 Quote Link to post Share on other sites
fikiwan 2 Posted February 11, 2012 Report 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 Quote Link to post Share on other sites
dsonesuk 930 Posted February 11, 2012 Report 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 Quote Link to post Share on other sites
Isibella 0 Posted February 11, 2012 Author Report 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. Quote Link to post Share on other sites
boen_robot 107 Posted February 12, 2012 Report 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 Quote Link to post Share on other sites
dsonesuk 930 Posted February 12, 2012 Report 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. Quote Link to post Share on other sites
dsonesuk 930 Posted February 12, 2012 Report 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. Quote Link to post Share on other sites
Luoslav 0 Posted April 20, 2014 Report 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? Quote Link to post Share on other sites
davej 251 Posted April 20, 2014 Report 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 Quote Link to post Share on other sites
Luoslav 0 Posted April 20, 2014 Report 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 Quote Link to post Share on other sites
Luoslav 0 Posted April 20, 2014 Report 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? Quote Link to post Share on other sites
davej 251 Posted April 20, 2014 Report 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 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.