Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The next skill that you want to master when working with the HTML editor that's built into Moodle is the creation of tables and tables are used to be used in HTML to do everything from laying out documents to presenting tables of data. They are mostly used now for just presenting tables of data and for small little layouts. So that's where we are going to use this table for. We want to post a document to our students that's a paper that's been written; it's a background about Coral Zooxanthellae Symbiosis. And we are going to create an outline of this document up at the top of the page and then in a later movie, we'll go through and we'll link that outline to the subsections. So to begin, go to the first week's block, January 26 to February 1, and click the dropdown menu for Add a resource and we are going to compose a webpage. So click on Compose a web page and we are going to give this a title, Coral Zooxanthellae Symbiosis. We'll give a little description here of Background information about the Coral Zooxanthellae Symbiosis. Go ahead and scroll down to the Compose a web page section. Now if you are following along with the exercises, go ahead and open up the background_html_ formatted.txt file from the Chapter 03 Exercise Files. Go ahead and select all which is Command+A or Ctrl+A and copy which is Command+A or Ctrl+C and we can go ahead and close that document and we'll return back to Moodle. Now don't just paste the text inside of here. What we are going to paste in here is some formatted HTML. So what we want to do is click on the Toggle HTML Source button over on the right-hand side. Select the break tag that's in there and go ahead and delete it and now hit Command+V or Ctrl+V and that will paste this entire document. If we then click on the Toggle HTML Source back again, we can see that there is an article that's been posted here. It's just a text document and the only formatting that I have applied is to go in and select each of the different headers and apply a Heading 1 or Heading 2 to those various different locations. So go ahead and scroll all the way up to the top and what we want to do is click at the very top of the text box, and we want to insert a table and we'll do that by clicking on the Insert Table button over here on the right- hand side. Now for this table, let's start off with a very simple table. We need to tell Moodle the number of rows and columns that we want our table to contain. So let's begin with a simple table of 1 row and 1 column and its default to set the Width to 100% meaning that this table is going to be 100% of the Width of the HTML window that we have open. And that's probably a little bit large for what we need. So go ahead and select the value for Width and type in 400 and we don't want Percent; what we really want is Pixels in this case. We are going to leave the Layout set to Not Set, but if you were inserting a table that you wanted to use as a sidebar, meaning you want to have it show up in the text and have the text wrap around it, you could start with your cursor at the beginning of the text and tell that you want it to be Left justified or Right justified and then the table would show up on the left or right side of that block of text, and the text would flow around it. But in our case, we want it to be just up at the top. So we'll leave it set to Not Set. Border thickness set to 1. That's great because that's going to put an actual line around the table. Spacing. to 1 and the Cellpadding both to 1 and these are how close the cells are to one another, which is Cellspacing and Cellpadding is how much space is in between the cells. So both of those values are fine. Let's go ahead and click OK and our new table is created for us right at the top for us to work in. So if we click our mouse inside of that table, you can see that there are some different controls that are showing up around the outside of the table. If we wanted to increase the number of columns, we could simply click on the small triangle that is pointing to the right-hand side of the circle and if I click on that, you can see there is another little cell over here, if I type in just a few characters. You can see that there is another cell that's being created. We can get rid of a column by clicking on the Circle icon at the top of the column, and that column disappears. Let's go ahead and add a new row by clicking the Down arrow on the left-hand side. So now we have a table that is divided into two rows and one column. We'll go ahead and type in the top column, Outline, and select the text that's inside of there and we'll go ahead and center that. Now for the text that's inside the main part of the table, what we want is all of the headings for this paper that we were working with, and rather than watch me type this, if you have access to the Exercise Files, you can open up a file in the Chapter 3 Exercise Files called background_ outline.txt and I have gone ahead and typed out the entire outline for you. So go ahead and select that and copy it using Command+C or Ctrl+C and we'll come into this second cell and paste it with Command+V or Ctrl+V. Once again, all that text just goes ahead and flows right into here. Now this top cell, it would be good to go ahead and differentiate that cell from the bottom cell a little bit. So in order to do that, we want to get into the row properties for this cell. So go ahead over to the right-hand side and click on the Enlarge Editor button. That's going to open up the large screen editor for us to work in, and we can click inside of that top cell. And this second icon here that has the kind of red bar highlighted in it is the Row properties tool. So go ahead and click on that tool, and this is going to give us the ability to go in and set any custom width and heights for this row of content that we want. We can set the Text alignment if we want and right now, its set to Left, but let's go ahead and set that to Center, so that our heading jumps directly over into the middle of that cell. Vertical alignment; if there were multiple lines here we could set whether or not we wanted the alignment of the text and any objects inside of that cell to be at the top of the cell or linked to the bottom or floating in the middle. At the top, it's just fine for what we are doing. And now down in the Style section, there is a Background property and this box right here is actually a color chip. So go ahead and click on that box and it's going to bring up a color selector for us and we can choose what color that we want to use as the Background color for this particular cell. I'm going to go ahead and choose this Gray color here which is a #CCCCCC. And if we wanted to have a Background image show up, we would go ahead and type that URL in here. There's also a place for us to enter the Foreground color and a Border color for this cell. But we have got everything set the way we wanted. We'll go ahead and click OK and now we can see that our text is now aligned into the middle of that cell and the cell has a nice background color on it. The next thing we want to do is go ahead and apply some formatting to this outline that we have pasted in. So I want to go ahead and select the whole outline and click on the Bulleted List button that's up in the HTML formatter and that's going to give us a nice bulleted list. Now we want to add a couple of more indentions to a few of these. Everything from Effects of Light to all the way down to Effects of Increased Temperature. Go ahead and select all of those areas and let's increase the indent on those and it's going to move all of those bullets in one indent. We'll also take and select both Zooxanthellae and Chlorophyll a, and the Chlorophyll a listing and we'll move those in as well and Chlorophyll a is a sub-heading of the Zooxanthellae and Chlorophyll a. So we'll go ahead and select Chlorophyll a and indent that one level as well. So now we have a nice table that we have inserted. We can use the internal controls to adjust the cells. The controls up here will do the same thing but these controls here are going to do it a lot quicker and a lot easier; it's all going to be just in line for you. We have got our table the way that we wanted, go ahead and click the Minimize editor and we can now go ahead and scroll all the way to the bottom and click the Save and display button, and we can see how our work looks. We have got our Outline table set up. We have got a heading for the table and we have got the Outline all laid out in there. So let's return back to our course, going up to BIOL432 and there is our Coral Zooxanthellae Symbiosis document that is ready for our students to use.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 90329 Viewers
80 Video lessons · 137833 Viewers
59 Video lessons · 56566 Viewers
52 Video lessons · 70189 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.