Discover Top Posts Tagged with #insert table

MS Word Insert Tab 02|| How To Make Table,Insert,Cell,Row,Column,Table ...

Nanotechnology: Shaping the World Atom by Atom

Image Courtesy: link: http://www.theverge.com/2013/2/18/4001412/nanotechnology-shaping-the-future author: theverge.com description: How nanotechnology is shaping C O N T E N T S: KEY TOPICS From the early 1980s to the year 2000, three communities: futurists, government officials and service providers generated common ends on the lofty but ambiguous grand challenge of “shaping the world atom by…

View On WordPress

#Eric Drexler #Industrial Revolution #Insert Table #James Cameron #Japan

New Post has been published on Rune Web Design

New Post has been published on http://www.runewebdesign.co.uk/blogging/insert-table-in-wordpress/

Insert a table into your WordPress post or page

Insert tables into your posts and pages on WordPress

As with everything in life there are different ways of doing things. I am going to share with you how I insert tables into my blog posts in WordPress. Whenever you need your data to appear in a table this is how I would do it. You could download a plugin to do this for you but with a few bits of code you can cut down on at least one plugin which will help your site load faster.

Back to basics

Before you can start jumping in and inserting your table you should know the three basic HTML tags needed. As always with HTML these tags wrap around the elements they contain in the form of an opening tag and closing tag.

HTML Tag Description <table> Appears at the beginning and end of your table, basically telling your browser that this is a table! <tr> Indicates a table row <td> Indicates table data; each set of <td> tags constitutes a column in your table

Let’s look at how I made the simple two-columned, four-rowed table above.

Step-by-step

First of all, work out how many rows and columns your table will have. The one above is simply four rows and two columns.

This is the way I think of a table. It may seem counter-intuitive to some who’s first instinct, like me, is to count the columns then the rows. Here’s why you count the rows first. In an HTML table you first indicate a row with <tr> tags and within those <tr> tags you have your table data <td> tags. These <td> tags are your columns. There are no column tags. And here’s a tip: make sure that each row has the same number of opening and closing <td> tags otherwise your table will not display properly.

Let’s get started

1. Insert table

We open and close the table using table tags <table></table>.

2. Add rows

Within those table tags we insert our first row:

3. Add columns

We add the number of <td> tags required to make our columns. For the table above, we want two columns:

4. Add multiple rows

Now copy your whole <tr> row and paste it on a new line each time for the number of rows you want to appear. For our table above we need four rows – remember to count your table headings as a row:

Those of you that have used HTML tables before may be wondering why I haven’t used the <th> tag for table headers. The simple reason is that WordPress doesn’t like <th> tags and weird things start to happen. Just treat your column headers as regular <td> tags and it will display just fine.

5. Add data

Now populate your table with your data:

<table> <tr><td>HTML Tag</td><td>Description</td></tr> <tr><td>table</td><td>Appears at the beginning and end of your table, basically telling your browser that this is a table!</td></tr> <tr><td>tr</td><td>Indicates a table row</td></tr> <tr><td>td</td><td>Indicates table data; each set of td tags constitutes a column in your table </td></tr> </table>

Styling your table

You’ve plotted out your table with HTML tags and added your content. Now we look how to style your table. For this table we will be making three CSS contextual selectors entries into our stylesheet.

Give your table an ID. This is so that if you create another table in a later post, your new table will not use the same CSS properties as the first which may be a different width, colour, etc. Try and call it something apt. I went with #tags-table. If you want to just refer to a table without an ID simply replace my #tags-table with just table (without the hash-tag).

Table Width

First we specify the width of the table. This will vary for you depending on how much room you have on your page. You can enter either a px or em value, or a percentage. I always tend to use percentages as it makes your table responsive – able to resize with browser-size.

#tags-table { width: 90%; }

Add a border

Next we need to specify the border by referring to both the table as a whole (our #tags-table) and each datum <td>.

#tags-table { width: 90%; } #tags-table, td { border: 1px solid #000; }

Now if we leave our table border with just these properties we see the effect below. A border around each individual <td> tag.

HTML Tag Description table Appears at the beginning and end of your table, basically telling your browser that this is a table! tr Indicates a table row td Indicates table data; each set of td tags constitutes a column in your table

If this is not what you want and you want a single line separating your data as in the table at the top of this page then you need to add an extra line of CSS to the <table> tag (our #tags-table) to collapse the borders:

#tags-table { width: 90%; border-collapse: collapse; } #tags-table, td { border: 1px solid #000; }

Now we see:

Making your table more accessible

Data within tables, especially when there is a lot of data, needs to be easy to read. To make your data more accessible we add a little padding around each <td> field:

#tags-table td { padding: 4px; }

Now you have your table. Personally I like to go a little further by highlighting the column headers which I did in my original table by adding a couple of extra lines of CSS using a class selector on the <td> tags found in the first row:

HTML

<tr><td class="column-header">HTML Tag</td><td class="column-header">Description</td></tr>

CSS

.column-header { background-color: #87004c; color: #fff; font-weight: bold; }

Armed and ready!

Now you are fully armed to insert your own table into your WordPress post or page. Play around with the table by adding more <td> tags to each <tr> set to make more columns and also with the CSS to see how colourful you can make your table.

Share this post and your thoughts!

Do you know an easier or better way of inserting a table? I would love to hear your comments.

Please share this quick tutorial on your social media networks.

#blog #code #content management system #design #insert table #spreadsheet #table #tabular data #wordpress