Jump to content

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

Isibella

By Isibella
in HTML/XHTML

 Share

Recommended Posts

Isibella Newbie

Isibella

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

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

Edited by Isibella
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

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 comment
Share on other sites
fikiwan Newbie

fikiwan

Posted
Posted
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 comment
Share on other sites
Isibella Newbie

Isibella

Posted
  • Author
Posted
@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 comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

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 comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
  • 2 years later...
Luoslav Newbie

Luoslav

Posted
Posted

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
davej Devoted Member

davej

Posted
Posted

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 comment
Share on other sites
Luoslav Newbie

Luoslav

Posted
Posted (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 by Luoslav
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...