Who here is good at html tables? {SOLVED - thanks, guys}

WillowRavenWillowRaven Posts: 3,757
edited January 2016 in The Commons

I am formating an ebook that required the use of a table to give me two columns. However, I don't know enough about html or tables to effectively alter the code so the text isn't altered on me. I want to be able to also controle the font family and size of the words in the table. Here is the code as it is now:

 <table align="left" border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width:500px;">

<tbody>

<tr>

<td>Abha na Sionainne</td>

 

<td>OW-wa nuh SHUN-in-nah</td>

</tr>

 

<tr>

<td>Ailill Mac M&aacute;ta</td>

 

<td>AHL-il mak MAWta</td>

</tr>

 

<tr>

<td>An trua (the unfortunate)</td>

 

<td>an TROO-uh</td>

</tr>

 

<tr>

<td>Ard-Righ (High King)</td>

 

<td>AWRD-ree</td>

</tr>

 

<tr>

<td>Ard-Righan (High Queen)</td>

 

<td>AWRD-ree-an</td>

</tr>

 

<tr>

<td>Aedh Ruad</td>

 

<td>EE-th ROO-uh</td>

</tr>

 

<tr>

<td>Aengus Ruad</td>

 

<td>ENG-yus ROO-uh</td>

</tr>

 

<tr>

<td>Aes s&iacute;dhe&nbsp;&nbsp; &nbsp;</td>

 

<td>ASH shee</td>

</tr>

 

<tr>

<td>&Aacute;ine</td>

 

<td>AW-nya</td>

</tr>

</tbody>

</table>

 

<p>&nbsp;</p>

</body>

</html>

Post edited by WillowRaven on

Comments

  • jpb06tjpb06t Posts: 272

    As a web developer, I can only advise you to learn HTML and CSS stylesheets. It is not something that can be explained in a couple of sentences (otherwise I would not make a living consulting about it laugh).

    B.t.w., tables for layout are a big, huge no-no. 

  • Lissa_xyzLissa_xyz Posts: 6,116
    edited January 2016

    To control the font as well you just need to add font and font-size tags to the style css of the table so it looks like this:

    style="width:500px; font:arial; font-size:14px;"

     

    Alter the font and px as needed.

    Post edited by Lissa_xyz on
  • WillowRavenWillowRaven Posts: 3,757
    Pixolygon said:

    To control the font as well you just need to add font and font-size tags to the style css of the table so it looks like this:

    style="width:500px; font:arial; font-size:14px;"

     

    Alter the font and px as needed.

    Where do I add this?

  • Lissa_xyzLissa_xyz Posts: 6,116
    edited January 2016

    You already have the style tag in your initial table tag. Just add the two font tags to it.

    &lt;table align="left" border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width:500px;"&gt;

     

    will turn into

     

    &lt;table align="left" border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width:500px; font:arial; font-size:14px"&gt;

     

    Post edited by Lissa_xyz on
  • WillowRavenWillowRaven Posts: 3,757
    jpb06t said:

    As a web developer, I can only advise you to learn HTML and CSS stylesheets. It is not something that can be explained in a couple of sentences (otherwise I would not make a living consulting about it laugh).

    B.t.w., tables for layout are a big, huge no-no. 

    I'm using Sigil to edit  the html converted PDF layout to epub. I like the software because normally, I don't need to know code. It wasn't until I had to create two 2-column sections to the layout that I needed a quick fix. I had no idea Adobe wouldn't translate the column information when it converted the PDF to code. I found all kinds of half-fixes online, but nothing than allowed me to maintain font style and size.

    The rest of the ebook is done except for these two sections that need columns. Are you familiar with Sigil?

  • WillowRavenWillowRaven Posts: 3,757
    Pixolygon said:

    You already have the style tag in your initial table tag. Just add the two font tags to it.

    &lt;table align="left" border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width:500px;"&gt;

     

    will turn into

     

    &lt;table align="left" border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width:500px; font:arial; font-size:14px"&gt;

     

    I did it, but the table didn't change.

  • Lissa_xyzLissa_xyz Posts: 6,116
    jpb06t said:

    As a web developer, I can only advise you to learn HTML and CSS stylesheets. It is not something that can be explained in a couple of sentences (otherwise I would not make a living consulting about it laugh).

    B.t.w., tables for layout are a big, huge no-no. 

    I would've adivsed the same, except this isn't for a website, this is for an epub.

  • Lissa_xyzLissa_xyz Posts: 6,116
    Pixolygon said:

    You already have the style tag in your initial table tag. Just add the two font tags to it.

    &lt;table align="left" border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width:500px;"&gt;

     

    will turn into

     

    &lt;table align="left" border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width:500px; font:arial; font-size:14px"&gt;

     

    I did it, but the table didn't change.

    In that case, you'll have to do the old fashioned way because whatever you're using isn't reading the CSS properly. You'll have to use <font face="arial"> and <font size="14px">.

    As an e-reader user, aren't users generally able to choose their own font/size based on their preference without needing it to be forced by the author? I can do it on my Kindle Paperwhite, and know that my Nook Tablet has that capability as well.

  • WillowRavenWillowRaven Posts: 3,757
    Pixolygon said:
    Pixolygon said:

     

    In that case, you'll have to do the old fashioned way because whatever you're using isn't reading the CSS properly. You'll have to use <font face="arial"> and <font size="14px">.

    As an e-reader user, aren't users generally able to choose their own font/size based on their preference without needing it to be forced by the author? I can do it on my Kindle Paperwhite, and know that my Nook Tablet has that capability as well.

    I'm using Sigil to create the epub. And for whatever reason, there's no easy tool for font changes. I know many readers allow the user to alter the text, but not all do, and I want it to look good even for those that don't. And since the rest of the book is in one font, and it only changes in the table, I'm hoping to at least look consistant.

    It appears sigil didn't like that soulution, either.

  • Lissa_xyzLissa_xyz Posts: 6,116

    I found this page regarding using style sheets in Sigil.

    http://web.sigil.googlecode.com/git/files/OEBPS/Text/tutorial_stylesheets.html

  • WillowRavenWillowRaven Posts: 3,757

    Thanks :D I have had a heck of a time finding much help from Sigil since their website changed.

  • WillowRavenWillowRaven Posts: 3,757

    That link wasn't any help. Anyone else know how to write html for a two-column ebook?

  • TaozTaoz Posts: 9,739

    This web design course is currently heavily discounted (through jan 11). I did a lot of webdesign in the past, then after a break of several years I wanted to update my skills to HTML 5 and CSS 3 and took this course. It's excellent - actually the Udemy course with most 5 star ratings - and includes 1 year of high quality web hosting.

    https://www.udemy.com/complete-web-developer-course/#/

  • NovicaNovica Posts: 23,859

    That link wasn't any help. Anyone else know how to write html for a two-column ebook?

    R.Scot Johns ebook "How to Make Kindle Comics and Children's Books" has templates, for fixed layout, which is what I will be using whenever I get started in formatting. I'm wondering if you can't create text boxes and put the information in them. If you use relative positioning (with flowable, I only used fixed format) would that work?  To set up those areas you use CSS and things like position:(whatever, say relative;) with the top: x%; left: x%; width:X%;  with the data inside that area. It's been awhile since I messed with CSS and formatting so I'm going to have to relearn from last year. And I don't do flowable as I want my text and images to be controlled.

  • ZarconDeeGrissomZarconDeeGrissom Posts: 5,412
    edited January 2016

    A simple way, for static HTML pages (No Java, flash, etc), I don't really know the HTML code all that well myself.  However I do have a Program that lets me make simple number charts (what I've used HTML tables for the most). I have discovered that the humble table can be very good for some simple things.

    So, in any case, is the attached toss together in a few seconds close to what your looking for?

    I picked up Nvu a very long time ago, and I don't know if it is still around. For my needs of simple static HTML, it works well for me.

    Example_HtmlTable_002.png
    668 x 570 - 21K
    HtmlTableMaking_07_001.png
    874 x 347 - 26K
    HtmlTableMaking_08_001.png
    882 x 634 - 36K
    Post edited by ZarconDeeGrissom on
  • TaozTaoz Posts: 9,739

    A simple way, for static HTML pages (No Java, flash, etc), I don't really know the HTML code all that well myself.  However I do have a Program that lets me make simple number charts (what I've used HTML tables for the most). I have discovered that the humble table can be very good for some simple things.

    I agree, though generally not recommended, they're can be quite useful for some things. It's just about knowing when to use them and when not to use them.

  • FishtalesFishtales Posts: 6,045

    Perhaps there is something in these links that will help.

    https://www.google.co.uk/search?client=opera&q=sigil+changing+font+size+in+tables&sourceid=opera&ie=UTF-8&oe=UTF-8

    I haven't used tables in a long while and have never used Sigil. I changed all my website to CSS and HTML and I have no idea how an ebook uses it or is laid out.

  • WillowRavenWillowRaven Posts: 3,757

    The table is fine for my needs other than the particular code doesn't allow me to alter the font family or size.That's all I need to know.

  • Lissa_xyzLissa_xyz Posts: 6,116

    Since adding them to the main table tag didn't work, try adding the style attribute to each of your <td> tags, so they look like this:

    &lt;td style="font:arial; font-size:14px"&gt;

     

    Don't add it to the </td> tags though, only the opening tags.

  • WillowRavenWillowRaven Posts: 3,757

    Grrr ... That didn't work, either.

    In this screenshot, you can see the code on the left and the result on the right. As you can see, so far, anything I add isn't altering the first row of the table. The font is still weird.

  • SimonJMSimonJM Posts: 5,945

    So far as I am aware 'native' HTML tables do not permit you to specify the font to use.  However, as mentioned above the 'style=' option can be used to specify CSS elements so if the device itself supports that you should be good to go.

    I threw together a quick check using Notepad, and:

    &lt;html&gt;&lt;body&gt;&lt;table align="left" border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width:500px;font-family: cursive, serif;font-size: 1.5em;"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Abha na Sionainne&lt;/td&gt;&lt;td&gt;OW-wa nuh SHUN-in-nah&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Ailill Mac M&amp;aacute;ta&lt;/td&gt;&lt;td&gt;AHL-il mak MAWta&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;

    Worked for me, using Firefox to render the html.

  • Grrr ... That didn't work, either.

    In this screenshot, you can see the code on the left and the result on the right. As you can see, so far, anything I add isn't altering the first row of the table. The font is still weird.

    The font in the table is clearly different from the rest of the stuff above the table. So close, and the font wont switch to what you want it to be in the table? Dose the "font-size" change when you change that number?  Case sensitive text font name?

    &lt;span style="font-family: Times New Roman;"&gt;TfontBlaBla&lt;/span&gt;

    Also, I keep getting it in a 'span style' not in the 'td style'.  I'm not sure that makes a dif or not, it may, posibly.

  • WillowRavenWillowRaven Posts: 3,757
    SimonJM said:

    So far as I am aware 'native' HTML tables do not permit you to specify the font to use.  However, as mentioned above the 'style=' option can be used to specify CSS elements so if the device itself supports that you should be good to go.

    I threw together a quick check using Notepad, and:

    &lt;html&gt;&lt;body&gt;&lt;table align="left" border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width:500px;font-family: cursive, serif;font-size: 1.5em;"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Abha na Sionainne&lt;/td&gt;&lt;td&gt;OW-wa nuh SHUN-in-nah&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Ailill Mac M&amp;aacute;ta&lt;/td&gt;&lt;td&gt;AHL-il mak MAWta&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;

    Worked for me, using Firefox to render the html.

    That worked! It seams as though I had to have the '-family' after the word 'font', and it finally worked. :D

    Thanks, guys :D

  • SimonJMSimonJM Posts: 5,945
    SimonJM said:

     

    That worked! It seams as though I had to have the '-family' after the word 'font', and it finally worked. :D

    Thanks, guys :D

    Happy to help :)

Sign In or Register to comment.