For the second time, I am having problems formatting tables. Today when customizing the endorsement page, a few weeks ago when trying to customize a newsletter.
I just need a simple top aligned table, but if I use your WYSIWYG software when I save it, my changes go away. And when I code the HTML, the changes also go away upon saving. (I had this problem when trying to format a newsletter too -- although that time it was column width that kept resetting.)
Help!!! We want our website and materials to look their best.
Susan.
Hello Susan —
As you've discovered, it's not possible to code HTML tables into the WYSIWYG / text editor, as it is designed to strip complex HTML formatting. This is because that editor is designed to be used for editing text, not for coding templates.
You do, however, have total control over your page-level templates from within the 'Template' tab on each page. (See below.) Within that tab, you can edit the HTML of your page directly — adding whatever code you'd like. Once you're comfortable with your changes, click "Save and Publish" and they'll be reflected on your public-facing website.
Showing 25 reactions
Sign in with
Hines Digital
Certified Architect
Certified Expert
Like Ian mentioned in his answer, the HTML editor will sometimes strip out more complex HTML formatting. So you might be better off putting this in your actual page template.
Let me know if you have any additional questions!
1. The 3 column table on your site looks good & works well. I’ll pass a link to this page on to whoever is going to code the changes for us. I’ve already learned from experience that bad things happen when I try to make even the simplest change to the coding in the templates. ;)
2. You mentioned another ‘non-table’ way to create ‘tables.’ I was trying to use a 2 column table with hidden borders on the homepage underneath the image sliders to create boxes in which we can post image/text links to featured pages. What is the alternative method?
3. Is there a particular reference book/site that you like that can teach this stuff?
For some reason the background color in .myNBtable th { } is all messed up. It should really read:
background-color: #e6e6e6;
Thanks,
-s
In looking at the response from NB it doesn’t look like they have any intention of fixing this issue. Thus, you will need to find a workaround. There are a couple of options:
1- Do not use tables. Many layouts really don’t require tables we are just use to using them. web design is not print design so you can’t always get the layout you want.
2- If you need to use tables, create a CSS class for your tables that you can use over and over again.
I have coded some CSS that you can use below. You can see the end product here:
http://www.thegardenprojectswcolorado.org/nb-table
Hopefully by looking at the code below you can see what’s going on. If not, post your questions here.
You will need to copy the CSS code below and paste it into your Theme.scss file. Then in your page editor, in the Table Properties box, simply add “myNBtable” to the Class field.
Note, you will not see any changes to the table in the editor itself because that is pulling styles from a different file. But, when you view the page you should see the styles take effect.
To change the look, alignment, etc just edit the attributes in the CSS.
.myNBtable { margin: 10px auto; width: 90%; border: 1px solid #999; } .myNBtable th { background-color: <a class="tweet-url hashtag" href="https://twitter.com/#!/search?q=%23E6E6E6" title="#E6E6E6">#E6E6E6</a>; text-align:center; padding: 8px; margin: 0; border: 1px solid #999; } .myNBtable td { text-align:center; padding: 4px; margin: 0; border: 1px solid #999; }For example, I used a simple table in a petition to provide shading behind the content. Of course, I needed padding on the edges. Unfortunately, I couldn’t get the padding to save so I used a para indent. Sort of works for the left, but not on the right. (http://http://www.mozuud.org/p1501-they_re_taking_our_homes_our_women_and_our_lives)
I also tried to insert a 2 column table on the home page below the fold (Publish theme), but couldn’t make it work.
It’s really second rate stuff that frustrates me even more in light of NB’s other amazing functionality. Surely, the thing that puts content on the page is worthy of working 100%. I’m giving up on this and passing it onto a coder. Hopefully, they’ll get around to fixing this one day.
<div class=“clearfix”></div> {% if page.tags_count > 0 %} {% include “page_tags” with page %} {% endif %}
<hr>
{% include “like_page” %} {% if page.show_stream? %} {% include “page_stream” %} {% endif %}
Unfortunately, the above in an unsatisfactory answer. Why have buttons on the WYSIWIG editor, have a window pop up that shows “alignment and cell padding” but you cant’ top align the table nor does it Pad or Space the cells. You have those options there, so obviously someone was trying to code it.
Please, you were able to design many features into the GUI, including the table. Doesn’t some one know how to create a GUI that can do this? It seems to me its a matter of programming. The feature choices are there, but they don’t save or work. Why do that?
Please make the GUI perform the functionality that is shown as available.
Hines Digital
Certified Architect
Certified Expert
It’s possible to do some basic table editing in our WYSIWYG editor (there’s an “insert table” button in the formatting bar, for example), but that’s really intended only for adding an actual table to the copy.
If you’re trying to use a table in order to provide structure or style to your email, that’s best done by editing the email theme directly.
You can learn more about editing a custom email theme here: http://nationbuilder.com/how_do_i_edit_an_email_template
— Ian