{"id":756,"date":"2007-05-17T14:58:03","date_gmt":"2007-05-17T06:58:03","guid":{"rendered":"http:\/\/www.janleow.com\/life\/?p=756"},"modified":"2007-05-17T14:58:03","modified_gmt":"2007-05-17T06:58:03","slug":"html-06-html-table-codes-border","status":"publish","type":"post","link":"https:\/\/www.janleow.com\/life\/html-06-html-table-codes-border.html","title":{"rendered":"HTML Lesson 6: Create HTML tables in your own website"},"content":{"rendered":"<p>Create tables is one of the more difficult HTML code to master when making your own website. It is well worth the effort to learn it as it can help you to align each section of your website. You need to think a little bit more abstractly and imagine how the table will look like after you have done the HTML coding.<\/p>\n<p>Some instructional text books said the tables were one of the most misuse codes for HTML. Hey, whatever works to tame your text, graphics and various sections in proper alignment!<!--more--><\/p>\n<p>The basic HTML codes for tables are:<\/p>\n<ul>\n<li>&lt;TABLE&gt; &#8211; table tag\n<li>&lt;TR&gt; &#8211; table row tag\n<li>&lt;TD&gt; &#8211; table definition column tag\n<\/ul>\n<p>To create your first simple table, just code it as below. The inclusion of BORDER=1 attribute makes the table visible. You may omit this code to make a borderless table or increase the number to make it thicker. However if you want better control of the table attribute, you should use CSS (Cascading Style Sheet), which is more advance technique of making your web site and controlling the various elements on a web page.<\/p>\n<table style=\"border: none; width:100%\">\n<tr>\n<td>\n<div style=\"border: 1px dashed; background: #E0FFFF; padding: 1em; text-align: left\">\n&lt;TABLE BORDER=1&gt;<br \/>\n&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<\/p>\n<p>Write some text here like:<br \/>\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer et nisl in eros mattis convallis. Duis turpis nunc, pretium ornare, fermentum id, ullamcorper vitae, eros. Mauris libero. Integer elementum sodales elit. Praesent quis felis. Duis ligula. Donec a risus.<\/p>\n<p>&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<br \/>\n&lt;\/TABLE&gt;\n<\/div>\n<\/td>\n<\/tr>\n<\/table>\n<p><br clear=\"all\"><\/p>\n<p>And what you get is this:<\/p>\n<table border=1>\n<tr>\n<td>\nWrite some text here like:<br \/>\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer et nisl in eros mattis convallis. Duis turpis nunc, pretium ornare, fermentum id, ullamcorper vitae, eros. Mauris libero. Integer elementum sodales elit. Praesent quis felis. Duis ligula. Donec a risus.\n<\/td>\n<\/tr>\n<\/table>\n<p> <br clear=\"all\"><\/p>\n<p>That was the easy part; now for the complicated part of making table with many rows and definition columns. This requires some abstract imagination on your part to get the TR row tag and TD column tag correct. One way to get it right is to draw out the table structure first.<\/p>\n<p>A three column table structure can be drawn out as thus:<\/p>\n<table style=\"border: none; width: 100%\">\n<tr>\n<td>\n<div style=\"border: 1px dashed; background: #E0FFFF; padding: 1em; text-align: left\">\n&lt;TABLE BORDER=1&gt;<\/p>\n<table style=\"border: none\">\n<tr>\n<td valign=top>\n&lt;TR&gt;<\/td>\n<td style=\"border: solid black thin\">\n&lt;TD&gt;<br \/>\nSome content 1<br \/>\n&lt;\/TD&gt;\n<\/td>\n<td style=\"border: solid black thin\">\n&lt;TD&gt;<br \/>\nSome content 2<br \/>\n&lt;\/TD&gt;\n<\/td>\n<td style=\"border: solid black thin\">\n&lt;TD&gt;<br \/>\nSome content 3<br \/>\n&lt;\/TD&gt;\n<\/td>\n<td valign=\"top\" style=\"border: none\">\n&lt;\/TR&gt;\n<\/td>\n<\/tr>\n<\/table>\n<p>&lt;\/TABLE&gt;\n<\/p><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<p><br clear=\"all\"><\/p>\n<p>Then later you can easily code according to what you have drawn.<\/p>\n<table style=\"border: none; width: 100%\">\n<tr>\n<td>\n<div style=\"border: 1px dashed; background: #E0FFFF; padding: 1em; text-align: left\">\n&lt;TABLE BORDER=1&gt;<br \/>\n&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<br \/>\nSome content 1<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<br \/>\n&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<br \/>\nSome content 2<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<br \/>\n&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<br \/>\nSome content 3<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<br \/>\n&lt;\/TABLE&gt;\n<\/div>\n<\/td>\n<\/tr>\n<\/table>\n<p><br clear=\"all\"><\/p>\n<p>And the end results will be:<\/p>\n<table border=1>\n<tr>\n<td>Some content 1<\/td>\n<td>Some content 2<\/td>\n<td>Some content 3<\/td>\n<\/tr>\n<\/table>\n<p> <br clear=\"all\"><\/p>\n<p>To create multiple boxes, pre-draw with the code as thus:<\/p>\n<table style=\"border: none; width: 100%\">\n<tr>\n<td>\n<div style=\"border: 1px dashed; background: #E0FFFF; padding: 1em; text-align: left\">\n&lt;TABLE BORDER=1&gt;<\/p>\n<table style=\"border: none\">\n<tr>\n<td valign=top>\n&lt;TR&gt;<\/td>\n<td style=\"border: solid black thin\">\n&lt;TD&gt;<br \/>\nSome content 1<br \/>\n&lt;\/TD&gt;\n<\/td>\n<td style=\"border: solid black thin\">\n&lt;TD&gt;<br \/>\nSome content 2<br \/>\n&lt;\/TD&gt;\n<\/td>\n<td style=\"border: solid black thin\">\n&lt;TD&gt;<br \/>\nSome content 3<br \/>\n&lt;\/TD&gt;\n<\/td>\n<td valign=\"top\" style=\"border: none\">\n&lt;\/TR&gt;\n<\/td>\n<\/tr>\n<tr>\n<td valign=top>\n&lt;TR&gt;<\/td>\n<td style=\"border: solid black thin\">\n&lt;TD&gt;<br \/>\nSome content 4<br \/>\n&lt;\/TD&gt;\n<\/td>\n<td style=\"border: solid black thin\">\n&lt;TD&gt;<br \/>\nSome content 5<br \/>\n&lt;\/TD&gt;\n<\/td>\n<td style=\"border: solid black thin\">\n&lt;TD&gt;<br \/>\nSome content 6<br \/>\n&lt;\/TD&gt;\n<\/td>\n<td valign=\"top\" style=\"border: none\">\n&lt;\/TR&gt;\n<\/td>\n<\/tr>\n<\/table>\n<p>&lt;\/TABLE&gt;\n<\/p><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<p><br clear=\"all\"><\/p>\n<p>And code it out as thus:<\/p>\n<table style=\"border: none; width: 100%\">\n<tr>\n<td>\n<div style=\"border: 1px dashed; background: #E0FFFF; padding: 1em; text-align: left\">\n&lt;TABLE BORDER=1&gt;<\/p>\n<p>&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<br \/>\nSome content 1<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<br \/>\n&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<br \/>\nSome content 2<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<br \/>\n&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<br \/>\nSome content 3<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<\/p>\n<p>&lt;!\u2014this is where the second row will come in &#8211;&gt;<\/p>\n<p>&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<br \/>\nSome content 4<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<br \/>\n&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<br \/>\nSome content 5<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<br \/>\n&nbsp; &nbsp;    &lt;TR&gt;<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;TD&gt;<br \/>\nSome content 6<br \/>\n&nbsp; &nbsp;    &nbsp; &nbsp;    &lt;\/TD&gt;<br \/>\n&nbsp; &nbsp;    &lt;\/TR&gt;<\/p>\n<p>&lt;\/TABLE&gt;\n<\/p><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<p><br clear=\"all\"><\/p>\n<p>And you will get:<\/p>\n<table border=1>\n<tr>\n<td>Some content 1<\/td>\n<td>Some content 2<\/td>\n<td>Some content 3<\/td>\n<\/tr>\n<tr>\n<td>Some content 4<\/td>\n<td>Some content 5<\/td>\n<td>Some content 6<\/td>\n<\/tr>\n<\/table>\n<p> <br clear=\"all\"><\/p>\n<p>\n<script type=\"text\/javascript\"><!--\ngoogle_ad_client = \"pub-5685769204706262\";\ngoogle_ad_width = 336;\ngoogle_ad_height = 280;\ngoogle_ad_format = \"336x280_as\";\ngoogle_ad_type = \"text\";\n\/\/2007-08-06: JanLeow.com Blogs (Content)\ngoogle_ad_channel = \"5832813811\";\ngoogle_color_border = \"FFFFFF\";\ngoogle_color_bg = \"FFFFFF\";\ngoogle_color_link = \"323539\";\ngoogle_color_text = \"000000\";\ngoogle_color_url = \"BBBBBB\";\n\/\/--><\/script><br \/>\n<script type=\"text\/javascript\"\n  src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\n<\/script><\/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>\n<\/p>\n<p><ul><lh>HTML Video Tutorial<\/lh><\/p>\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><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create tables is one of the more difficult HTML code to master when making your own website. It is well worth the effort to learn it as it can help you to align each section of your website. You need to think a little bit more abstractly and imagine how the table will look like &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.janleow.com\/life\/html-06-html-table-codes-border.html\"> <span class=\"screen-reader-text\">HTML Lesson 6: Create HTML tables in your own 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,160,162],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1bS5F-cc","jetpack-related-posts":[{"id":1324,"url":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-20-tables-rows-columns.html","url_meta":{"origin":756,"position":0},"title":"Creating tables, rows and columns when you make website","author":"Jan","date":"31 March 2009","format":false,"excerpt":"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.\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":1314,"url":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-16-text-formatting.html","url_meta":{"origin":756,"position":1},"title":"Text formatting video tutorial","author":"Jan","date":"31 March 2009","format":false,"excerpt":"These are some of the basics of HTML code that you should at least know when you make your own web site. This is useful not only in your own web site, but also when you want to make post and comments (if the option is available to you). The\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":756,"position":2},"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":741,"url":"https:\/\/www.janleow.com\/life\/html-02-creating-a-website-page.html","url_meta":{"origin":756,"position":3},"title":"HTML Lesson 2: Create the web site page","author":"Jan","date":"19 March 2007","format":false,"excerpt":"The HTML web page is separated into two sections: the head section and body section. Both these section is nested within the HTML tag which identifies the file as HTML code for browsers to recognize it as such. The HEAD section is where you will provide the TITLE of your\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":756,"position":4},"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":751,"url":"https:\/\/www.janleow.com\/life\/html-04-text-alignment.html","url_meta":{"origin":756,"position":5},"title":"HTML Lesson 4: text alignment","author":"Jan","date":"21 March 2007","format":false,"excerpt":"The default text alignment for content in a paragraph is left side. Sometimes you may want to make the text align to the right or in the center. To make the text align to the left or right you include the align attribute to the paragraph tag. Example, align to\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\/756"}],"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=756"}],"version-history":[{"count":0,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/posts\/756\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/media?parent=756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/categories?post=756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/tags?post=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}