Custom tables - Githubissues

KajWiik commented 4 years ago

I am trying to produce a table where the cells contain hyperlinks with hover text. This seems not be possible to accomplish with standard markdown, so I tried to do it with raw HTML, i.e with ~~~...~~~. It seems that it is not possible, nothing get rendered. How could I do it?

PS. This is more like question rather than issue, I could not find a way to tag this as a question...

tlienart commented 4 years ago

Hello! could you find some website somewhere that does what you’d like (or comptable)? And could you post what you tried? Thanks!

KajWiik commented 4 years ago

OK, I'll proceed with small steps. It seems that tables are not rendered at all, in my test page I have first a Markdown table and then raw HTML table, neither are rendered:

|sadf|asdfsdf|
|----|----|
|sadf|asdfsdf|

~~~
<table>
  <tr> 
    <td><a href="yle.fi" title="asdfsaf">About</a></td> 
    <td><a href="yle.fi">About</a></td> 
    <td><a href="yle.fi">About</a></td> 
 </tr>
 <tr>
    <td><a href="yle.fi">About</a></td> 
    <td><a href="yle.fi">About</a></td> 
    <td><a href="yle.fi">About</a></td> 
  </tr>
</table>
~~~

Here's the page source, the tables seem to be there:

<!doctype html>
<!--
  Minimal Mistakes Jekyll Theme 4.16.4 by Michael Rose
  Copyright 2013-2019 Michael Rose - mademistakes.com | @mmistakes
  Free for personal and commercial use under the MIT license
  https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE
-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/css/franklin.css">
  <link rel="stylesheet" href="/css/minimal-mistakes.css">
  <link rel="stylesheet" href="/css/adjust.css">
  <!--[if IE ]>
  <style>
    /* old IE unsupported flexbox fixes */
    .greedy-nav .site-title {
      padding-right: 3em;
    }
    .greedy-nav button {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
    }
  </style>
  <![endif]-->
  <!-- start custom head snippets -->
  <link rel="icon" href="/assets/favicon.png">
   <title></title>  
  <!-- insert favicons. use https://realfavicongenerator.net/ -->
  <!-- end custom head snippets -->
</head>
<body class="layout--single">
  <div class="masthead">
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
      <nav id="site-nav" class="greedy-nav">
        <a class="site-title" href="/">Bits and pieces</a>
        <ul class="visible-links">
          <li class="masthead__menu-item"><a href="/vlbi/" >VLBI</a></li>
          <li class="masthead__menu-item"><a href="/receivers/" >Receivers</a></li>
      <li class="masthead__menu-item"><a href="/chopper/" >Chopper</a></li>

          <li class="masthead__menu-item"><a href="/backends/" >Backends</a></li>
        </ul>
        <button class="greedy-nav__toggle hidden" type="button">
          <span class="visually-hidden">Toggle menu</span>
          <div class="navicon"></div>
        </button>
        <ul class="hidden-links hidden"></ul>
      </nav>
    </div>
  </div>
</div>

  <div class="initial-content">
    <div id="main" role="main">
      <div class="sidebar sticky">
        <div itemscope itemtype="https://schema.org/Person">
          <div class="author__avatar">
          </div>
          <div class="author__content">
            <h3 class="author__name" itemprop="name">Kaj Wiik</h3>
            <p class="author__bio" itemprop="description"></p>
          </div>
          <div class="author__urls-wrapper">
            <button class="btn btn--inverse">Follow</button>
            <ul class="author__urls social-icons">
              <li itemprop="homeLocation" itemscope itemtype="https://schema.org/Place">
                             <li><a href="https://github.com/KajWiik" rel="nofollow noopener noreferrer"><i class="fab fa-fw fa-github" aria-hidden="true"></i> GitHub</a></li>
            </ul>
          </div>
        </div>
      </div>

<!-- Content appended here -->
<div class="franklin-content"><table><tr><th align="right">sadf</th><th align="right">asdfsdf</th></tr><tr><td align="right">sadf</td><td align="right">asdfsdf</td></tr></table>

<table>
  <tr> 
    <td><a href="yle.fi" title="asdfsaf">About</a></td> 
    <td><a href="yle.fi">About</a></td> 
    <td><a href="yle.fi">About</a></td> 
 </tr>
 <tr>
    <td><a href="yle.fi">About</a></td> 
    <td><a href="yle.fi">About</a></td> 
    <td><a href="yle.fi">About</a></td> 
  </tr>
</table>
<div class="page-foot">
  <div class="copyright">
    &copy; Kaj Wiik. Last modified: May 24, 2020. Website built with <a href="https://github.com/tlienart/Franklin.jl">Franklin.jl</a>.
  </div>
</div>
</div><!-- CONTENT ENDS HERE -->

      </div> <!-- closure of main -->
    </div>   <!-- closure of class initial--content -->

    <div class="page__footer">
      <footer>
        <!-- start custom footer snippets -->
        <!-- end custom footer snippets -->
        <div class="page__footer-follow">
          <ul class="social-icons">
            <li><strong>Follow:</strong></li>
            <li><a href="https://twitter.com/mmistakes" rel="nofollow noopener noreferrer"><i class="fab fa-fw fa-twitter-square" aria-hidden="true"></i> Twitter</a></li>
            <li><a href="https://github.com/mmistakes" rel="nofollow noopener noreferrer"><i class="fab fa-fw fa-github" aria-hidden="true"></i> GitHub</a></li>
          </ul>
        </div>
        <div class="page__footer-copyright">&copy; Kaj Wiik. Powered by <a href="https://github.com/tlienart/Franklin.jl">Franklin</a> &amp; <a href="https://mademistakes.com/work/minimal-mistakes-jekyll-theme/" rel="nofollow">Minimal Mistakes</a>.</div>
      </footer>
    </div>

    <script src="/libs/minimal-mistakes/main.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>

  <!-- browser-reload script, automatically added by the LiveServer.jl -->
<script>
var ws_liveserver_M3sp9 = new WebSocket("ws://" + location.host + location.pathname);
ws_liveserver_M3sp9.onmessage = function(msg) {
    if (msg.data === "update") {
        ws_liveserver_M3sp9.close();
        location.reload();
    };
};
</script>
</body>
</html>

Many thanks for your excellent support!

KajWiik commented 4 years ago

Update: they render but are at bottom of the page so I did not notice them first, sorry. Something strange going on, I guess with CSS. I'll investigate further...

Edit: Confirmed, probles stem from MinimalMistakes theme, I'll continue experimenting with local style definition that seems to work perfectly.

tlienart commented 4 years ago

For such exploration I would suggest you use the sandbox template as a playground and then it's easier to identify whether it's a Franklin bug or something else

btw this https://tbeason.com/financeconferences/ was built with Franklin and has a nice table which might help

tlienart commented 4 years ago

Can I close this? or were there any pain points that should be either better explained or smoothed out?

KajWiik commented 4 years ago

Yes, the problem was in themes. Raw html works OK and with it anything is possible. Many thanks!

tlienart / Franklin.jl

Custom tables #500