Jump to content

How would you go about creating the code for this display in Xhtml?


Recommended Posts

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 :(

post-91905-0-96003000-1328926048_thumb.jpg

Edited by Isibella
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites
It's my experiment , perhaps no good but I hope can help U... .
@fikiwan :facepalm:
<!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>

  • Like 1
Link to post
Share on other sites
@fikiwan :facepalm:
<!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.

post-91905-0-23618800-1328980770_thumb.jpg

Link to post
Share on other sites

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 css
Not required is not the same thing as forbidden :P .
  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites
  • 2 years later...

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 post
Share on other sites

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>
  • Like 1
Link to post
Share on other sites

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 by Luoslav
Link to post
Share on other sites

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>
  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...