Tables

Learn how to create tables to organize content on your ECEn XML web page.

It is often useful to break large blocks of content into sections . The ECEn XML web templates use sections to organize all kinds of web content. Sections are used for paragraphs, tables, and lists, among other types of content.

To create tables in the ECEn Web XML, we're going to use <section> tags.

These instructions assume that you already have an ECEn XML web page to edit and know at least a bit about XML. Most content, such as text, links, lists, pictures etc., belongs in the <content> portion of your page; check the instructions below to see if you need to make sure that you have a page with a <content> portion. If you need a quick tutorial or just a simple starter web page download, check out the 'Howdy, World' Tutorial where you can get a brief overview of what files you need to set up a basic ECEn XML web page.

If you need an example, have a look at the Tables Example page. You can view the XML source in your browser by clicking the 'this XML' link at the bottom of the page. Or, the XML source is located in the Common Tasks Downloads to the right. (Right click, Save Link Target As...)

Basic Tables

Let's have a look at some ECEn XML "code" to generate a small table:

<section>

<has-column>Class</has-column>

<has-column>Title</has-column>

<has-row>ECEn-CS 124</has-row>

<has-row>ECEn 191</has-row>

<style>visible border</style>

<style>visible column headings</style>

<section>

<in-row>ECEn 191</in-row>

<section>

<in-column>Class</in-column>

<text>ECEn 191</text>

</section>

<section>

<in-column>Title</in-column>

<text>Freshman Seminar</text>

</section>

<section>

<in-row>ECEn-CS 124</in-row>

<section>

<in-column>Class</in-column>

<text>ECEn-CS 124</text>

</section>

<section>

<in-column>Title</in-column>

<text>Introduction to Computer Organization</text>

</section>

Here is what this table would look like on ECEn XML web page:

Class	Title
ECEn-CS 124	Introduction to Computer Organization
ECEn 191	Freshman Seminar

That seems like a lot of code just to generate a table with two columns and two rowss, but once the table is set up, changing individual cells is easier. Once the hard work of setting up the table is finished, you should benefit from easier upkeep in the future.

We'll take the source code apart and you'll find that it isn't so complicated after all.

To create a basic table:

We use <section> tags to create tables. We use these sections in two ways:

1.1	The "main" section defines the columns and rows of the table and the table's basic look and feel (borders, headings etc.)

1.2	The "child" sections, or sections within the main section, make up the table cells. Each cell section contains table cell content and where the content belongs.

Create a "main" <section> containing <has-row> and <has-column> tags, which define the columns and rows for the table. It's important to realize that the order and presence of rows and columns in the table is determined by the has-row and has-column tags, not by the order of the child sections with the actual content. So you can rearrange or delete rows and columns by just reordering the has-row and has-column tags in the main table section without ever having to touch the actual content section.

If you'd like, add <style> tags to give your table a border or specify whether you'd like column and/or row headings to appear. For all the possible table styles check out The ECEn XML Templates Reference.

Create "child" <section>'s containing <in-row> and <in-column> tags, which define where this cell belongs in the table, along with the cell content.
The sample table uses a trick to save typing:

3.1	Create a "child" section with an `<in-row>` tag, but no `<in-column>` tag.

3.2	Within this section, create other sections, we'll call them "grandchild" sections, with an `<in-column>` tag, but no `<in-row>` tag.

3.3	Within these "grandchild sections," create all the content you'd like in that particular row and column.

What if I still don't get it... Have look at the Tables Example and if you're still stuck, send an email to the ECEn Web Team and we'll be happy to help you.