Tables are a pain to implement well. Ask yourself if you really need a table. If the answer is yes, then ask yourself if you really want page columns. If so, see that section. If not than ask yourself if you really need a table again. If the answer is still yes then you can do the following to create a table.
Switch from Visual to Text view to view the content markup. Navigate to the section you want to create the table.
Tables should have heading rows.
Simple Table
A simple table may look like the following:
<table>
<tbody>
<tr>
<th>Column Title 1</th>
<th>Column Title 2</th>
<th>Column Title 3</th>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</tbody>
</table>
| Column Title 1 | Column Title 2 | Column Title 3 |
|---|---|---|
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
Styling Table
You can add borders, captions, and/or limit the width of the table. You can also shrink the content using the borders class, the caption tag, the width property, and the small-font class respectively.
<table class="border">
<caption>Table w/Border and Caption</caption>
<tbody>
<tr>
<th>Column Title 1</th>
<th>Column Title 2</th>
<th>Column Title 3</th>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</tbody>
</table>
| Column Title 1 | Column Title 2 | Column Title 3 |
|---|---|---|
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
Here is a table with borders, small text, a caption, column spans, and reduced width. Changes from previous table are in blue. Remove the strike-through lines.
<table class="border small-font" style="width: 50%;"> <caption>Table w/Everything</caption> <tbody> <tr> <th>Column Title 1</th> <th colspan="2">Column Title 2</th><th>Column Title 3</th></tr> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td colspan="3">Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </tbody> </table>
| Column Title 1 | Column Title 2 | |
|---|---|---|
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | ||
| Cell 3.1 | Cell 3.2 | Cell 3.3 |