{"id":233,"date":"2011-11-01T19:22:01","date_gmt":"2011-11-02T02:22:01","guid":{"rendered":"http:\/\/rockblot.wordpress.com\/?p=233"},"modified":"2011-11-01T19:22:01","modified_gmt":"2011-11-02T02:22:01","slug":"using-html-to-create-a-table-in-your-wp-article","status":"publish","type":"post","link":"https:\/\/www.rockblotter.com\/DijaKnowThat\/using-html-to-create-a-table-in-your-wp-article\/","title":{"rendered":"Using HTML to Create a Table in Your WP Article"},"content":{"rendered":"

Have you ever wanted to present some data in a table format in your wordpress document, but you’re not an HTML whiz-kid? \u00a0 The free version of WP doesn’t have a widget to help you create a table, so that means you’ll need to use HTML code to create that table. \u00a0Let’s see if I can simplify for you how you can do that within the HTML window to create the framework for your table. Once the framework is built, you can return to the VISUAL window to fill in the data.<\/p>\n

HTML uses what I’ll call START and END tags. \u00a0You’ll need to ‘wrap’ your table between <table> and <\/table> tags. \u00a0Within those tags, you need to start the body of your table with a <tbody> tag and end the body of your table with a <\/tbody> tag.<\/p>\n

<table>
\n<tbody>
\n\u00a0 \u00a0this is where you’ll put all your rows of columns (we’ll talk about codes for that next)<\/span>
\n<\/tbody>
\n<\/table><\/p><\/blockquote>\n

Now that you’ve got that set up, you’ll create your rows and the columns within those rows. \u00a0If you were using a\u00a0word-processor\u00a0to create a table, you’d start a row within the table by typing something to be displayed in column 1, then tab to where column 2 would begin, type something, and then tab to where column 3 would begin, and type something, etc. \u00a0HTML uses START <tr> and END <\/tr> tags to identify where each ROW begins and ends. \u00a0Between <tbody> and <\/tbody> tags you’ll create START <td> and END <\/td> tags to identify where data for each column within that row starts and ends. \u00a0For example, let’s say we want to create a ROW that has 3 columns of data. \u00a0Here’s what that framework would look like:<\/p>\n

<tr>
\n<td> <\/td>
\n<td> <\/td>
\n<td> <\/td>
\n<\/tr><\/p><\/blockquote>\n

The <tr> and <\/tr> tags start and end the row. \u00a0The <td> and <\/td> tag starts and ends a column within that row. \u00a0If you want to create more rows, just repeat that structure. \u00a0For example, let’s say \u00a0you want to create a table that has four rows and three columns. \u00a0This is what the HTML code would look like for that simple table:<\/p>\n

<table>
\n<tbody><\/p>\n

<tr>
\n<td> <\/td>
\n<td> <\/td>
\n<td> <\/td>
\n<\/tr><\/p>\n

<tr>
\n<td> <\/td>
\n<td> <\/td>
\n<td> <\/td>
\n<\/tr><\/p>\n

<tr>
\n<td> <\/td>
\n<td> <\/td>
\n<td> <\/td>
\n<\/tr><\/p>\n

<tr>
\n<td> <\/td>
\n<td> <\/td>
\n<td> <\/td>
\n<\/tr><\/p>\n

<\/tbody>
\n<\/table><\/p><\/blockquote>\n

The framework above will create a table that has four rows with three columns. \u00a0If you need more rows or more columns, just increase the number of row tags and\/or column tags in your framework.<\/p>\n

\n\n\n\n\n\n\n
………<\/span><\/td>\n………<\/span><\/td>\n………<\/span><\/td>\n<\/tr>\n
\u00a0…..\u00a0<\/span><\/td>\n\u00a0…..<\/span><\/td>\n\u00a0…..<\/span><\/td>\n<\/tr>\n
\u00a0…..<\/span><\/td>\n\u00a0…..<\/span><\/td>\n\u00a0…..<\/span><\/td>\n<\/tr>\n
\u00a0…..<\/span><\/td>\n\u00a0…..<\/span><\/td>\n\u00a0…..<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/blockquote>\n

Once you click on the VISUAL tab and begin typing data in the table cells, the cells will adjust themselves to accommodate the data you’re typing into the cells. \u00a0You may not want the automatic adjustments to the overall table width or the column widths. \u00a0You may instead want to fix the width of the columns and force the data to word-wrap within the various column cells.<\/p>\n

SETTING OVERALL \u00a0<TABLE> \u00a0ATTRIBUTES<\/strong><\/p>\n

If you want the table to be a fixed or flexible width on the screen, you’ll need to add an attribute to the <table> tag:<\/p>\n

    \n
  • The syntax of the table width attribute is <table width=”value<\/em>“><\/strong><\/span>
    \n\n\n\n\n\n
    Value<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n
    pixels<\/em><\/td>\nSets the width in pixels (example: width=”50″)<\/td>\n<\/tr>\n
    %<\/em><\/td>\nSets the width in percent of the surrounding element (example: width=”50%”)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ul>\n

    If you want the table to have or not have a border, you’ll need to set a border attribute within the <table> tag:<\/p>\n

      \n
    • The syntax of the table border attribute is\u00a0<table border=”value<\/em>“><\/strong><\/span>
      \n\n\n\n\n
      Value<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n
      pixels<\/em><\/td>\nSpecifies the border width as a number<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ul>\n

      If you need to provide some\u00a0space between the cell wall border and the cell content, you might want to create some ‘cell padding.’<\/p>\n

        \n
      • The syntax of the cell padding attribute is\u00a0<table border=”value<\/em>“>
        \n<\/strong><\/span><\/p>\n\n\n\n\n
        Value<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n
        pixels<\/em><\/td>\nThe space between the cell wall and the cell content<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ul>\n


        \nSETTING INDIVIDUAL TABLE CELL ATTRIBUTES<\/strong><\/p>\n

        You can also modify data within the column-rows. \u00a0You can modify the column width, vertical alignment of the data and the horizontal alignment by modifying the attributes of the <td> tag.<\/p>\n

          \n
        • The syntax of the column width attribute is <td width=“value”<\/em>><\/strong><\/span>. \u00a0The value attribute can be any number of pixels or a percentage of screen width (and needs to be enclosed in parentheses). \u00a0Plus, to simplify things, you technically only need to include the width attribute definitions in the first row of the table. \u00a0All rows that follow the first row will use the same widths as are defined in the first row of the table.<\/li>\n
        • The syntax of the table cell horizontal alignment is <td align=”value<\/em>“><\/span>.<\/strong>
          \n\n\n\n\n\n\n\n\n
          Value<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n
          left<\/td>\nLeft-align content (default for td elements)<\/td>\n<\/tr>\n
          right<\/td>\nRight-align content<\/td>\n<\/tr>\n
          center<\/td>\nCenter-align content<\/td>\n<\/tr>\n
          justify<\/td>\nStretches the lines so that each line has equal width (like in newspapers and magazines)<\/td>\n<\/tr>\n
          char<\/td>\nAlign the content to a specific character<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n
        • The syntax of the table cell vertical \u00a0alignment is\u00a0<td valign=”value<\/em>“><\/strong><\/span>.
          \n\n\n\n\n\n\n\n
          Value<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n
          top<\/td>\nTop-align content<\/td>\n<\/tr>\n
          middle<\/td>\nCenter-align content<\/td>\n<\/tr>\n
          bottom<\/td>\nBottom-align content<\/td>\n<\/tr>\n
          baseline<\/td>\nThe baseline is the “imaginary line” which most letters “sit” on, in a line of text. The baseline value sets the row so that all the table data share the same baseline. Often this has the same effect as the bottom value. However, if the fonts are in different sizes, baseline looks better. Look at the illustration below<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ul>\n

          So, let’s take a look at how we might want to create a 3-row, 3-column table with equal widths of 125 pixels and cell padding of 2 pixels, with table cells that are top-aligned.<\/p>\n

          <table width=”98%” border=”0″ cellpadding=”2″>
          \n<tbody>
          \n<tr>
          \n<td valign=”top” width=”125″><\/td>
          \n<td valign=”top” width=”125″><\/td>
          \n<td valign=”top” width=”125″><\/td>
          \n<\/tr>
          \n<tr>
          \n<td valign=”top”><\/td>
          \n<td valign=”top”><\/td>
          \n<td valign=”top”><\/td>
          \n<\/tr>
          \n<tr>
          \n<td valign=”top”><\/td>
          \n<td valign=”top”><\/td>
          \n<td valign=”top”><\/td>
          \n<\/tr>
          \n<\/tbody>
          \n<\/table><\/p><\/blockquote>\n

          Once that HTML-Table code is created or pasted into the HTML pane, all that remains is to add the actual data in each of the table cells. Adding that data, however, can be done from the VISUAL pane.<\/p>\n

          Hope this post helps you create a table the next time you need one.<\/p>\n","protected":false},"excerpt":{"rendered":"

          Have you ever wanted to present some data in a table format in your wordpress document, but you’re not an HTML whiz-kid? \u00a0 The free version of WP doesn’t have a widget to help you create a table, so that means you’ll need to use HTML code to create that table. \u00a0Let’s see if I […]<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/posts\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":0,"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rockblotter.com\/DijaKnowThat\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}