Tables

Learn how to create tables to organize content on your ECEn 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 a ECEn XML web page to edit and know at least a bit about XML. Most content, such as text, links, lists, pictures etc., belong in the <content> portion of your page, so 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 brief overview on 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 by clicking the 'this XML' at the bottom of the page. Or, the XML source 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 generate a table with two columns and two rows. Relax! It is easy code to understand and once you have a row or two the rest is copy and paste.

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. 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.