Complex table

Written by @kerixa 22 February 2014

Here, you can see the power of table tag and its properties to create the complex table. In some design, you need to have a such complex tables!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->

<TABLE border>
 <CAPTION align="top">
	A more complex table-within-a table.
 </CAPTION>
 <TR>
	<TH>
	   Outer Table
	</TH>
	<TD>
	   <TABLE border>
		  <CAPTION align="top">
			 An inner table showing a variety of headings
			 and data items.
		  </CAPTION>
		  <TR>
			 <TH colspan="5">
				Inner Table
			 </TH>
		  </TR>
		  <TR>
			 <TH rowspan="2" colspan="2">
				CORNER
			 </TH>
			 <TH colspan="3">
				Head1
			 </TH>
		  </TR>
		  <TR>
			 <TH rowspan="2">
				Head2
			 </TH>
			 <TH colspan="2">
				Head3
			 </TH>
		  </TR>
		  <TR>
			 <TH>
				Head4
			 </TH>
			 <TH>
				Head5
			 </TH>
			 <TH>
				Head6
			 </TH>
		  </TR>
		  <TR>
			 <TD>
				A
			 </TD>
			 <TD rowspan="2" valign="middle" bgcolor=
			 "yellow">
				Two Tall
			 </TD>
			 <TD bgcolor="green">
				<UL>
				   <LI>
					  Lists can be table data
				   </LI>
				   <LI>
					  Images can be table data
				   </LI>
				</UL>
			 </TD>
			 <TD colspan="2" align="center">
				Two Wide
			 </TD>
		  </TR>
		  <TR valign="middle">
			 <TD>
				<IMG src="http://www.htmlbestcodes.com/files/icon-ok.gif" alt=
				"HTML Station"> 
			 </TD>
			 <TD align="center">
				A <A href="form.html">Form</A> in a table: 
				<FORM Method="POST" Action= "http://www.december.com/cgi-bin/formmail.secure.cgi">
				   <INPUT type="hidden" name="recipient"
				   value="nobody@december.com"><INPUT type=
				   "hidden" name="subject" value=
				   "Table Example"> Your age: <INPUT type=
				   "text" name="user-age" size="2"><BR>
					What is your favorite ice cream?<BR>
					<SELECT name="favorite-icecream">
					  <OPTION>
						 Vanilla
					  </OPTION>
					  <OPTION selected>
						 Chocolate
					  </OPTION>
					  <OPTION>
						 Cherry Garcia
					  </OPTION>
					  <OPTION>
						 Pizza Pancake
					  </OPTION>
					  <OPTION>
						 None of the above!
					  </OPTION>
				   </SELECT><BR>
					<INPUT type="submit" value="OK"> <INPUT
				   type="reset" value="Cancel">
				</FORM>
			 </TD>
			 <TD>
				<TABLE>
				   <CAPTION>
					  No border
				   </CAPTION>
				   <TR>
					  <TH>
						 Little
					  </TH>
				   </TR>
				   <TR>
					  <TD>
						 Table
					  </TD>
				   </TR>
				</TABLE>
			 </TD>
			 <TD>
				Multiple<BR>
				 line<BR>
				 item
			 </TD>
		  </TR>
	   </TABLE>
	</TD>
 </TR>
</TABLE>
<br/>
<a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: TheDewalt, sahjahan, fk khan, Proper, Jenisha
advertisement 2