Wiki: How to Add and Format Tables in TechNet Wiki

Wiki: How to Add and Format Tables in TechNet Wiki

Insert Table

Once you click on the Edit tab of an article, you are presented with a radEditor rich text box where you can type or copy/paste your article in a WYSIWYG format. In the toolbar just above the text box is an icon that looks like a spreadsheet with a pen on top of it called 'Insert Table'. Clicking on this button allows you to select a number of rows and columns using a visual aide. This will insert a basic table with no formatting.

HTML Editor

This will create a simple table with a specific table width, specific column widths, a header row and borders around all the cells in the Wiki HTML Editor.

Paste the table contents below between the <body></body> tags of an html document at http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_style for a preview:

<!-- Change the properties for the table tag as listed below. Default values for cellpadding -->
<!-- and cellspacing prevent border from appearing around all cells so set both to “0”. -->
<!-- Default value for table width will cause table width to be governed by table contents. -->
<!-- If your wiki article will contain multiple tables and you want to apply a consistent -->
<!-- width to all tables, set the table width value here and use that value for every table.-->
 
<table cellpadding="0" cellspacing="0" width="600" rules="all" style="border: #000000 thin solid;">
 
<!-- Use the style attribute of the <tr> tag to set the background-color -->
<!-- and font-weight of the first row to silver and bold, respectively. -->
<!-- Use the valign attribute of the <tr> tag to set text alignment to "top". -->
 
<tr style="background-color: silver; font-weight: bold;" valign="top">
 
<!-- Add columns to rows with the <td> tag and use the style -->
<!-- attribute to set the width for each column so that the sum -->
<!-- of all column widths equals the table width set above. -->
 
<td style="width: 400px">HeaderRow, Column1, Width is 400 pixels</td>
<td style="width: 200px">HeaderRow, Column2, Width is 200 pixels</td>
</tr>
 
<!-- Add rows as needed with <tr> tags. Columns will continue to use the -->
<!-- widths set in the first row unless the number of columns per row changes -->
<!-- so no need to keep setting column widths for this table.-->
 
<tr valign="top">
<td>Row2, Column1</td>
<td>Row2, Column2</td>
</tr>
<tr valign="top">
<td>Row3, Column1</td>
<td>Row3, Column2</td>
</tr>
</table>


This table should render as follows:
HeaderRow, Column1, Width is 400 pixels HeaderRow, Column2, Width is 200 pixels
Row2, Column1 Row2, Column2
Row3, Column1 Row3, Column2

Data Entry

Now that you have a table with the desired number of text areas, it is time to enter some data. If you have a small amount of data, you can enter the data manually, cell by cell. One caveat to this is that the editor automatically adds a space in each cell, so you might want to remove that extra space if you have a lot of columns to save space. If you already have a large amount of data in a spreadsheet or other format in table form, you can copy/paste it into the editor. However, depending on the source, this can carry over formatting, which might not translate well to the Wiki editor formatting.

Formatting

If you save the article and take a look at it, you might notice that it doesn't look exactly how you want. Do not fret! You can either edit the table by right-clicking on it and using the GUI or edit the HTML manually. The GUI is rather self-explanatory, so I will go into the HTML editing (click the HTML tab at the bottom). One of the most-used properties of tables that makes reading the information easier is borders. To add in a very simple border to create a barrier around your data, you can replace the HTML <table> tag with <table border="1">. If you would prefer a sleaker table border, here is another optional table tag: <table style="border: thin solid #000000; border-image: initial;" rules="all" cellspacing="0" cellpadding="0">.

If the table that you created is too wide, it can be cut off on the right side. To get around this, you can manually modify the width of the table using the appropriately named 'width' property. Example: <table border="1" width="600">.

Pasting a Table from Excel

Sometimes you can just paste a table from Excel into the main Design tab of TechNet Wiki and be done.

However, if your table is too wide and has too many columns, then it won't fit in the Wiki article's page width. It's possible to add a scrollbar to your table, but having to scroll the table in order to read it is a poor experience. It's better to fit all the columns on one page (or delete some columns so that they all fit).

If your table doesn't fit, then here's a preferred process...

1. Copy from Excel.

2. Paste into Word.

3. Tweak the table inside of Word until it fits within 6 inches wide.

4. Copy it from Word.

5. Paste into Wiki (main Design tab).

References

Other languages

This article is also available in the following languages :
Sort by: Published Date | Most Recent | Most Useful
Comments
  • Carsten Siemens edited Revision 6. Comment: HTML code is displayed as a formatted code block

Page 1 of 1 (1 items)