{"id":1324,"date":"2009-03-31T22:57:56","date_gmt":"2009-03-31T14:57:56","guid":{"rendered":"http:\/\/www.janleow.com\/life\/?p=1324"},"modified":"2009-03-31T22:57:56","modified_gmt":"2009-03-31T14:57:56","slug":"make-your-own-web-site-20-tables-rows-columns","status":"publish","type":"post","link":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-20-tables-rows-columns.html","title":{"rendered":"Creating tables, rows and columns when you make website"},"content":{"rendered":"<p>\nTables are useful when you make your own web site. Apart from displaying information in a nice spreadsheet like structure. It can also be used to align your web site layout. However the over use of tables for web site alignment is frowned upon as it mean bad programming practice.\n<\/p>\n<p>\nAs a lay user, we are not expert programmers. We may end up using programs like Dreamweaver, Frontpage or similar software to build our web sites. However I did notice that Dreamweaver is also not a follower of good programming practices when it comes to aligning the various web page block sections, it overuses tables to create spacing and margins. So if you are part software user, part programmer, you would definitely knock your head on the wall when you try to edit the HTML codes directly after initially using Dreamweaver to create the overall page structure.\n<\/p>\n<p>\nUsing tables to align sections is a lot easier than using CSS. Though the current web page developer convention is to use CSS to align each block accordingly to each block section of the web page. I&#8217;ll leave that kind of coding to the experts. For me, I&#8217;ll use a simple table set up to get each block section into exactly where I want them to be and for the rest of the layout and design, I use CSS.\n<\/p>\n<p><!--more--><\/p>\n<table border=\"0\" cellpadding=\"0\" align=\"center\" width=\"505\">\n<tr>\n<td ><object id  =\"flashMovie\"   codeBase =\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=5,0,0,0\"   height   =\"367\"   width    =\"505 \"   classid  =\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" VIEWASTEXT>   <PARAM NAME=\"_cx\"                VALUE=\"26\">   <PARAM NAME=\"_cy\"                VALUE=\"26\">   <PARAM NAME=\"FlashVars\"          VALUE=\"csConfigFile=20_config.xml\">   <PARAM NAME=\"Movie\"              VALUE=\"20_controller.swf?csConfigFile=20_config.xml\">   <PARAM NAME=\"Src\"                VALUE=\"20_controller.swf?csConfigFile=20_config.xml\">   <PARAM NAME=\"WMode\"              VALUE=\"Window\">   <PARAM NAME=\"Loop\"               VALUE=\"false\">   <PARAM NAME=\"Quality\"            VALUE=\"high\">   <PARAM NAME=\"SAlign\"             VALUE=\"\">   <PARAM NAME=\"Menu\"               VALUE=\"-1\">   <PARAM NAME=\"Base\"               VALUE=\"\">   <PARAM NAME=\"AllowScriptAccess\"  VALUE=\"always\">   <PARAM NAME=\"DeviceFont\"         VALUE=\"0\">   <PARAM NAME=\"EmbedMovie\"         VALUE=\"0\">   <PARAM NAME=\"BGColor\"            VALUE=\"#FFFFFF\">   <PARAM NAME=\"SWRemote\"           VALUE=\"\">   <PARAM NAME=\"MovieData\"          VALUE=\"\">   <PARAM NAME=\"SeamlessTabbing\"    VALUE=\"1\">   <\/OBJECT>  <\/td>\n<\/tr>\n<\/table>\n<p><center><script type=\"text\/javascript\"><!--\ngoogle_ad_client = \"pub-5685769204706262\";\ngoogle_alternate_color = \"eeeecc\";\ngoogle_ad_width = 468;\ngoogle_ad_height = 60;\ngoogle_ad_format = \"468x60_as\";\ngoogle_ad_type = \"text\";\n\/\/2007-08-06: JanLeow.com (Content)\ngoogle_ad_channel = \"0608098433\";\ngoogle_color_border = \"FFFFFF\";\ngoogle_color_bg = \"FFFFFF\";\ngoogle_color_link = \"003399\";\ngoogle_color_text = \"000000\";\ngoogle_color_url = \"808080\";\ngoogle_ui_features = \"rc:0\";\n\/\/--><\/script><script type=\"text\/javascript\"\n  src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\n<\/script><\/center><br clear=\"all\"><\/p>\n<p>\nTables uses three sets of HTML codes, namely &lt;table&gt; &#8211; to tell the browser you are starting a table, &lt;tr&gt; &#8211; to create a table row, and &lt;td&gt; &#8211; to create a table column.\n<\/p>\n<p>\nLet&#8217;s say we create a simple 4&#215;4 table, we will code it out as:\n<\/p>\n<p>\n&lt;table&gt; <br \/>\n&lt;tr&gt;&lt;td&gt;1&lt;\/td&gt;&lt;td&gt;2&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td&gt;3&lt;\/td&gt;&lt;td&gt;4&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;\n<\/p>\n<p>\nAnd we will get: <\/p>\n<table border=\"1\" width=\"30%\">\n<tr>\n<td>1<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>4<\/td>\n<\/tr>\n<\/table>\n<p>\nAnd to get something more complicated like a header in the table that spans across two or more column we use the colspan=&#8221;x&#8221; in the td tag. So let&#8217;s create a 5&#215;4 with a header row:\n<\/p>\n<p>\n&lt;table&gt;<br \/>\n&lt;tr&gt;&lt;td colspan=&#8221;2&#8243;&gt;Header&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td&gt;1&lt;\/td&gt;&lt;td&gt;2&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td&gt;3&lt;\/td&gt;&lt;td&gt;4&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;\n<\/p>\n<p>\nAnd we get: <\/p>\n<table border=\"1\" width=\"30%\">\n<tr>\n<td colspan=\"2\">Header<\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>4<\/td>\n<\/tr>\n<\/table>\n<p>\nAnd finally to make the table border lines invisible, we use <em>border=&#8221;0&#8243;<\/em> in the table tags itself.\n<\/p>\n<p>\n&lt;table border=&#8221;0&#8243;&gt;\n<\/p>\n<p>\nAnother important code to know is <em>cellspacing=&#8221;x&#8221;<\/em>. This is used to control the gap between the cells. This code is important to know because CSS code cannot control the gap between cells, especially if you want to remove the gap in between. To remove the gap, use <em>cellspacing=&#8221;0&#8243;<\/em>:\n<\/p>\n<p>\n&lt;table border=&#8221;0&#8243; cellspacing=&#8221;0&#8243;&gt;\n<\/p>\n<p>\nThat&#8217;s the basics of making tables using HTML when you make your own web site.\n<\/p>\n<ul>\n<li><a href=\"make-your-own-web-site-15-html-how-it-works.html\">Learning HTML basics<\/a>\n<li><a href=\"make-your-own-web-site-16-text-formatting.html\">HTML Text formatting<\/a>\n<li><a href=\"make-your-own-web-site-17-more-text-formatting.html\">More HTML Text formatting<\/a>\n<li><a href=\"make-your-own-web-site-18-adding-images.html\">Adding images to your website<\/a>\n<li><a href=\"make-your-own-web-site-19-anchors-links.html\">Making links and anchors when you make your own web site<\/a>\n<li><a href=\"make-your-own-web-site-20-tables-rows-columns.html\">Creating tables, rows and columns in your web site<\/a>\n<\/ul>\n<\/p>\n<p><b>More related HTML tutorials<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-basics.html\">Learning HTML codes for building a web page<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-01-the-basics.html\">Lesson 1 &#8211; The Basic HTML Tag<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-02-creating-a-website-page.html\">Lesson 2 &#8211; Create a website page<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-03-text-formatting.html\">Lesson 3 &#8211; Text formatting tags<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-04-text-alignment.html\">Lesson 4 &#8211; Aligning the paragraph text<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-05-making-ordered-bulleted-list.html\">Lesson 5 &#8211; Making bullet list and numbered list<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-06-html-table-codes-border.html\">Lesson 6 &#8211; Create tables in your website<\/a>\n<\/ul><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tables are useful when you make your own web site. Apart from displaying information in a nice spreadsheet like structure. It can also be used to align your web site layout. However the over use of tables for web site alignment is frowned upon as it mean bad programming practice. As a lay user, we &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.janleow.com\/life\/make-your-own-web-site-20-tables-rows-columns.html\"> <span class=\"screen-reader-text\">Creating tables, rows and columns when you make website<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[12],"tags":[83,111,160,161,162],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1bS5F-lm","jetpack-related-posts":[{"id":223,"url":"https:\/\/www.janleow.com\/life\/dreamweaver-web-building-software-or-content-management-system-cms.html","url_meta":{"origin":1324,"position":0},"title":"Dreamweaver web building software or content management system (CMS)?","author":"Jan","date":"21 August 2008","format":false,"excerpt":"I'm never a fan of bloated web building software like Dreamweaver or Microsoft Frontpage. Sure they are very easy to use for designing a web page. Very much like using Microsoft Word or Powerpoint, just create a box here and there and add in your content, pictures and whatever you\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":736,"url":"https:\/\/www.janleow.com\/life\/html-basics.html","url_meta":{"origin":1324,"position":1},"title":"Learning HTML","author":"Jan","date":"19 March 2007","format":false,"excerpt":"Let's face it, even if you are planning to use the provided installation script to make a CMS website, blogging website or use the provided web builder from the web hosting provider, you still have to learn some HTML. There is no escape from getting your hands dirty into coding\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":739,"url":"https:\/\/www.janleow.com\/life\/html-01-the-basics.html","url_meta":{"origin":1324,"position":2},"title":"HTML Lesson 1: The basic HTML tag","author":"Jan","date":"19 March 2007","format":false,"excerpt":"You can create a HTML document using any text editor like Notepad, Wordpad for Windows, or Simple Text on the Mac. There is no need to buy any sophisticated HTML software like Microsoft Frontpage or CoffeeCup HTML editor. However, as your needs progress you may want to consider getting one.\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1316,"url":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-17-more-text-formatting.html","url_meta":{"origin":1324,"position":3},"title":"More text formatting video tutorial","author":"Jan","date":"31 March 2009","format":false,"excerpt":"Once you have mastered the basics of text formatting. Here some more advance features to make your own web site stand out. It requires tinkering with the attribute of the tags. Each HTML tag has attributes which you could modify. Let's take for example the Paragraph tag <P>, you can\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1297,"url":"https:\/\/www.janleow.com\/life\/make-website.html","url_meta":{"origin":1324,"position":4},"title":"Make Website","author":"Jan","date":"15 June 2009","format":false,"excerpt":"Whether you make a website for personal use or for your business, it doesn't have to be all Greek to you. You don't need to be a geek to make a website either. Sure if you got money or budget to spare you can farm it out to all those\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":990,"url":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-note-about-browser-differences.html","url_meta":{"origin":1324,"position":5},"title":"Make your own web site note about browser differences","author":"Jan","date":"5 February 2009","format":false,"excerpt":"It may be interesting and fun to make your own web site. However the way each browser (IE\/Firefox\/Opera\/Chrome) handles the HTML\/CSS codes leaves you with many headaches. Although my browser of choice is Firefox, there is still a large user base for Internet Explorer. I can say that roughly as\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/posts\/1324"}],"collection":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/comments?post=1324"}],"version-history":[{"count":0,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/posts\/1324\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/media?parent=1324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/categories?post=1324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/tags?post=1324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}