Section 24. Creating Tables in Your Posts

24. Creating Tables in Your Posts


31 Defining and Implementing Custom Styles

While blogging, you might encounter a time when you want to present text that isbest displayed in a table format. The Blogger post editor does not contain a table creation wizard, but a basic table contains only a few elements and its syntax is easy to understand. The following steps show how to create a basic table in HTML. You can follow along by logging in to Blogger and clicking the New Post icon in the Blogs section of the Blogger Dashboard.

24. Creating Tables in Your Posts


Stylize Your Table Elements

For this example, I added the following elements to my Blogger template's style sheet so that I could quickly reference the styles by name instead of repeating the style attributes within in the HTML.

 table              {border: 1px solid black; width: 350px;} td                 {border: 1px solid black; padding: 5px} td.LeftAlignHdr    {font-weight: bold; text-align:left; background-color: #CCCCCC;} td.CenterAlignHdr  {font-weight: bold; text-align:center; background-color: #CCCCCC;} td.LeftAlign       {font-weight: normal; text-align:left;} td.CenterAlign     {font-weight: normal; text-align:center;} 

The first item defines the table as being 350 pixels wide and having an outer border which is 1 pixel wide and solid black in color. The remaining styles are for the table data cells themselves. The second entry states that all table data cells should have a 1 pixel solid black border, and padding should be placed on all four sides; that is, the text inside the cell should have five pixels of whitespace on its top, right, bottom, and left sides.

The remaining four items define specific types of table data cells. The LeftAlignHdr and CenterAlignHdr classes will be used for the column headingsthe text will appear in a bold font, either left or center aligned, and on a grey background. The LeftAlign and CenterAlign classes will be used for the remaining table data cells, and the text with them will be of normal weight and aligned either to the left or to the center.


You can learn more about styles and classes in Appendix B, "CSS Fundamentals."

A table is encompassed by the <table></table> tag pair:

 <table cellspacing="0"> [table rows and cells go here] </table> 

The cellspacing attribute used in the preceding code ensures that the table rows and columns have no extra spacing between them. In the figure, you can see the results of the application of these table styles.


Create Table Rows

A table row is enclosed by the <tr></tr> tag pair. Table rows contain table data cells:

 <table cellspacing="0"> <tr> [table cells go here] </tr> </table> 

The HTML for table rows should be repeated for as many rows as you have in your table. Remember to close the table row tag pair before you start a new one.


Create Column Headings

In this example, the column headings are created by applying the LeftAlignHdr and CenterAlignHdr styles to the <td></td> tag pair:

 <table cellspacing="0"> <tr> <td >TEAM</td> <td >WINS</td> <td >LOSSES</td> <td >PCT</td> </tr> </table> 

The column headers are table data cells, much like the table data cells that will followthe difference is in the style applied to them. Just as I reminded you to close your <tr></tr> tags, be sure to close your <td></td> tags as well.


Populate Your Table with Data

The following code is all that was used to create the table you see in the figure. Each row contains four table data cells, and the table itself contains six rows.


For more information regarding table data cells, including row and column spanning, please see Appendix A, "HTML Fundamentals."

 <table cellspacing="0"> <tr> <td >TEAM</td> <td >WINS</td> <td >LOSSES</td> <td >PCT</td> </tr> <tr> <td >San Diego</td> <td >50</td> <td >50</td> <td >.500</td> </tr> <tr> <td >Arizona</td> <td >49</td> <td >54</td> <td >.476</td> </tr> <tr> <td >Los Angeles</td> <td >46</td> <td >54</td> <td >.460</td> </tr> <tr> <td >San Francisco</td> <td >43</td> <td >57</td> <td >.430</td> </tr> <tr> <td >Colorado</td> <td >36</td> <td >63</td> <td >.364</td> </tr> </table> 


When hand-coding your own HTML you might also want to ensure the Convert Line Breaks setting is set to No. You can find this setting under the Settings tab, Formatting navigation item, in your Blogger management interface.

If Convert Line Breaks is set to Yes and you create a table with your elements clearly delimited such as those just shown, your post will contain extra line breaks and thus extra whitespace between your table rows. If you keep Convert Line Breaks set to Yes, you can eliminate this extra whitespace by typing your HTML without line breaks, such as the following:


Blogging in a Snap
Blogging in a Snap (Sams Teach Yourself)
ISBN: 0672328437
EAN: 2147483647
Year: 2003
Pages: 124 © 2008-2017.
If you may any questions please contact us: