Aimy H1 Heading: Context: com_content.article

Working With Tables in Joomla Articles

Here is the relevant transcript for this video:

A Joomla Tutorial on Working with Tables in JCE

This tutorial will show you how to use the table features for working with tables inside of an article in Joomla.

We're at the Basic Joomla site. I really don't have much done on this site yet so this is one of the first tutorials that I've put together on it. But to demonstrate how tables works we're going to log into the back-end of the site and open up and edit an article.

So, let's edit this article that's on the front page of the site. Not many words there yet. I'm going to ... I'm already logged into the back-end of the site in this tab ... so you know how to log in to the back-end of your Joomla site, or I'll do another tutorial on that. We'll click on the Welcome article and what we're going to be working with are these buttons here that are grayed or shaded out. This editor is JCE editor. It's a "by subscription" editor for using in Joomla - at least some of the fancier buttons are. You can get it from joomlacontenteditor.com I believe. I'll put the link in the description for this video. But these are all grayed out because there is no table here in the article. But let's put one in there now, and just click in the article, make a new line for it.

I can do a couple things here. I can right click and go to "inserts a new table" and then I will have an option of how many columns, how many rows, the alignment, padding, width, different things like that, or I could use this button here, the one table button that's not grayed out, which says "inserts a new table," could click on that and that opens up that window, or I could actually click on the down arrow and just begin to select up to 4 by 4 for the initial table. So, I'm going to go with 4 x ... let's go 3 x 3. Now I've picked this option just to show, 'cuz this is super tiny, but the cursor is flashing in the last cell, and to expand it, just to show that - I'm going to type a few Ds in there and the whole table begins to expand. Likewise, if I click carefully in the middle cell you can type letters in there and expand it and the same with this first cell.

All right. Let's just put some basic information in this table. Let's make the first column "Last Name" and the next column "First Name" and the last column ... let's go "Favorite Color," and I will use the American spelling as I've opted to in my videos. Now those are column headers and we can apply formatting - whatever we normally would to other things in Joomla articles - we can apply to these cells. So, I can select that and make it bold, and I could even give it a larger size ... 14 points ... let's give it, well 18 points is probably too big but we'll will stick with that ... 18 points. Now I could also go through there individually and give this all the same format. In fact, I think I could select all those cells and change the font size again. That turned it off because the first one was selected but now, now they're all big. And I could also do bold. Bold will turn off that first one. I'll hit bold again and there it goes.

Now I have no idea why this is jumped over like that because I don't believe that that is even a cell, so let's just try to figure that out down the road later on. I will ...

Actually I just stopped the video right there for a second and the formatting fixed itself by me just changing ... it was just a funny display thing that was happening. I actually went and viewed the code and then it went to, by clicking the source code editor button, just looked at the code, unclicked it and it starts showing up properly. So that was just a little glitch on a screen while I did that.

Anyway, so now we have our table. It's 3 x 3 with titles. We don't need these here that were holding space there. So let's go with the first Last Name. Let's go with the last name of "Doe" and we'll click in here, and we'll give First Name "John." What's John Doe's favorite color? Red. And we'll go with "Doe," we'll put his wife in there. This cell actually has a space at the beginning of the things that I'm entering automatically. If you want that, that's good. It kind of sets it off or you can take them out. "Doe Jane." And what's Jane's favorite color? Let's say that it's "blue." Now we're working away on this table. Now let's say that John changed his favorite color. Of course, it would just be like editing any other text in an article. Just double click on what you want to change in a cell there or even click at the beginning and go 'delete,' and let's make his favorite color green.

Now what would happen if John and Jane had a child who also had a different favorite color? We need to add a row. Well that's easy. We can do that a couple ways. First of all, we'll click somewhere in this row, and now you see all these table buttons are alive and there's a button when you mouse over that says, "insert row after." Yes, that's what we want. Here's one that would put a row in front, but now we'll put the kid last. So, we click on there. There we go! Empty line in the table. So "Doe." What's their kids name? Let's say they had a "Joey" and Joey's favorite color was my favorite color "orange."

And that's basically a lot of the basics of how to work with tables using JCE editor in Joomla.

Now just as we inserted a column, sorry, inserted a row, we can insert a column by clicking anywhere in any cell in this column and using this button "insert column before," "insert column after" or we could delete that column all together. Now it does get a little bit goofy when we start merging certain cells over rows and deleting but that's the same in any software, just tables are fiddly that way. But why don't we put a column in before this column. Now it's there but there's nothing in it so it's skinny like our initial one. But if we click in there we could go "Initial." And John's initial is G, and Jane's initial is H, and Joey's initial is K.

Now you notice that this table is also shifted off to the left of the article here, and if we want it to appear centered in the article, one might think you could click outside the box here and just click "center" ... let's give that a try ... nope that did not work. I didn't think that was going to work. What you do is this. Click the table somewhere, right click, go to table properties. Table properties will come up and here's where you set the alignment. I'm going to pick Center and click update. Now that table will always be centered on the page. This can be fiddly in other versions of JCE editor and other versions of Joomla and it's possible could be fiddly on your site even if you're using the same things that I'm using. But they're constantly updating the code and fixings things like that.

You'll see some other things that you can do here. We could select this whole row and we could go to a background color, and we could give it a slight blue shade. Now oh that's the background for the text. Well we don't want just that highlighted. Well maybe you do; I don't. I'm just going to click "undo." Let me just pause to look at these buttons a little bit better.

And having paused I see what we want to do. If I click in the row, right click, and go down to "row," now I can select "table row properties" and I have some general properties here. I could center everything in that row, the alignment I could Center it. I can make the text in it aligned to the top. Lots of things to experiment with in here.

But with regards to shading, we can go to the Advanced tab, go to the background color, and here we can pick, well, we could pick something along the dial here and use the color picker or we could go to actually just these basic web colors which I'll do for speed. And let's just check ... here are ... this might be all the colors being used in the template, but I doubt that severely, so anyways we'll pick that. And look, we can do a border color. Let's give this a border color of black, and I don't know if we've even given it a border size so no border might show up. Anyways, now we've got updated, and you can see we update that. Now we've got a blue background and there would be a black border around there but somewhere that needs to be assigned to it. That would probably show up black on that if we go to table properties and then in the table properties we will assign a border of let's say two pixels there. There we go. And it's black all the way around. Now we could go to row, table row properties, and we've picked the color. Let's pick a different color, let's pick that nice red there. And update. Now we've got individual red borders around there but we have a black border on the table.

There's lots of things to explore. This is just the basics of how to work with tables, but if you have a table already on a page that you're working on, on your site or you want to put a table, these buttons are your friends and so is right clicking to navigate and work your way through.

If you have any questions for the questions about tables then certainly ask them of me and I will perhaps make a tutorial about your specific question and put it up here on the site. So I hope that helps that ... oh well, we should certainly save this shouldn't we? Let's save that, and we'll refresh the homepage. There's our table looking really nice now.

I will say one more thing about tables. When we right click in here and go to table properties there is a place where we can set the width. So I could make a huge table that's 900 pixels wide. We go update and now it's stretched out big and that's great for the website. But if your site is ... if it's important for your site to be able to be viewed on mobile devices - especially cell phones - setting a width for your table or even using tables can really throw off your mobile template. They're not, tables are not always mobile friendly and most often aren't, when you're just working with these raw tables, so use those sparingly. Some people will put a table on a page and use it to line up images and all kinds of information. There's better ways, other ways to do that because there's so many people using cell phones and tablets now you don't want to be wrecking the look of your site or making it impossible for people to read because the table is so wide that your page is so, so small and tiny and font on mobile devices.

So I'll just wrap things up right there, and enjoy working with tables on your Joomla site. God bless!


subscribe basic joomla

subscribe cybersalt

earn coins bn

Login Form