FANDOM


  • Hey, I have a few questions about designing tables using HTML, and CSS if needed, this table is for the main page. First thing is, how do I create/make even horizontal gaps between columns in a table. Second is, how do I create a big table for the entire main page and put more tables inside them and connect them with others tables' borders, so table 1's bottom border would connect with table 2's top border. For this, I've tried putting table in top of the page and  /table in bottom, but didn't seem to work well.And Finally, how to put the title name, "Welcome to "this" wiki," inside the top border of a table, not top and without using a header(I used a header before and didn't work).. I've been trying to figure these things out for days but didn't get useful results, so I think it's time to look for assistance. 

    Forgot to mention, how do I put names under images. I have done by going to the "source" editing and putting the name under the image, something like this:

    </p>
    
    <p style="font-weight:400;"><tr></p>
    
    <p style="font-weight:400;"><td> something.png </td></p>
    
    <p style="font-weight:400;">name</p>
    
    <p style="font-weight:400;"></tr></p>
    
    <p style="font-weight:400;">

    But I dont think that's the right way

      Loading editor
    • I am not sure what you are used to but MediaWiki offers a simplified table markup. See Help:Tables and mw:Help:Tables.


      Edit:

      For images, see Help:Photos, Help:Wikitext#Image_formatting, and mw:Help:Images.

        Loading editor
    • Andrewds1021 wrote:
      I am not sure what you are used to but MediaWiki offers a simplified table markup. See Help:Tables and mw:Help:Tables.----

      Edit:

      For images, see Help:Photos, Help:Wikitext#Image_formatting, and mw:Help:Images.

      I went over the links you linked and I still wasnt able to solve it. However, the mediawiki links, are really informative and I'll keep them saved for future reference. 

        Loading editor
    • I am still a bit confused as to what you mean by "even horizontal gaps between columns". Are you saying you want columns to be equal length, emty space around contents to be equal length, or that you want the borders between columns to be equal length?

        Loading editor
    • Andrewds1021 wrote:
      I am still a bit confused as to what you mean by "even horizontal gaps between columns". Are you saying you want columns to be equal length, emty space around contents to be equal length, or that you want the borders between columns to be equal length?

      I want to space the columns of a table. Right now, they are too close together and I want to space them out evenly(equal in length from each other), so empty space around contents. 

        Loading editor
    • Use the CSS table-layout:fixed; and be sure to set a width for the table.

        Loading editor
    • Andrewds1021 wrote:
      Use the CSS table-layout:fixed; and be sure to set a width for the table.

      It worked, thanks. Also, What about using the top border of a table as a header?

        Loading editor
    • Well, you can add a caption. However, if you are talking about having the header in the exact place the border would be, that is a bit more complicated.

        Loading editor
    • Andrewds1021 wrote:
      Well, you can add a caption. However, if you are talking about having the header in the exact place the border would be, that is a bit more complicated.

      Yea, having the header in the exact place the border would be. 

        Loading editor
    • So... that is what you are trying to do?

        Loading editor
    • Andrewds1021 wrote:
      So... that is what you are trying to do?

      yea... Is it that complicated? 

      Edit: Forgot to mention, which is more important, how do I make a content table ( I don't know the name) that allows me to put tables inside it, like a bigger table. 

        Loading editor
    • If you want an effect similar to tables within tables, you can try rowspan= and colspan= attributes. Here is a guide.

        Loading editor
    • You can also nested tables. Given that you want to use HTML instead of MediaWiki markup, this link might be more helpful.

      <table style="width:100%;table-layout:fixed;border:1px solid blue;">
        <caption>Outer Table</caption>
        <tr>
          <td>Row 1 Column 1</td>
          <td>Row 1 Column 2</td>
          <td>Row 1 Column 3</td>
          <td>Row 1 Column 4</td>
          <td>Row 1 Column 5</td>
        </tr>
        <tr>
          <td rowspan="2" colspan="3">
            <table style="width:100%;table-layout:fixed;border:1px solid red;">
              <caption>Inner Table (Rows 2-3 Columns 1-3)</caption>
              <tr>
                <td>Row 1 Column 1</td>
                <td>Row 1 Column 2</td>
                <td>Row 1 Column 3</td>
                <td>Row 1 Column 4</td>
              </tr>
              <tr>
                <td>Row 2 Column 1</td>
                <td>Row 2 Column 2</td>
                <td>Row 2 Column 3</td>
                <td>Row 2 Column 4</td>
              </tr>
              <tr>
                <td>Row 3 Column 1</td>
                <td>Row 3 Column 2</td>
                <td>Row 3 Column 3</td>
                <td>Row 3 Column 4</td>
              </tr>
            </table>
          </td>
          <td>Row 2 Column 4</td>
          <td>Row 2 Column 5</td>
        </tr>
        <tr>
          <td>Row 3 Column 4</td>
          <td>Row 3 Column 5</td>
        </tr>
      </table>
      Outer Table
      Row 1 Column 1 Row 1 Column 2 Row 1 Column 3 Row 1 Column 4 Row 1 Column 5
      Inner Table (Rows 2-3 Columns 1-3)
      Row 1 Column 1 Row 1 Column 2 Row 1 Column 3 Row 1 Column 4
      Row 2 Column 1 Row 2 Column 2 Row 2 Column 3 Row 2 Column 4
      Row 3 Column 1 Row 3 Column 2 Row 3 Column 3 Row 3 Column 4
      Row 2 Column 4 Row 2 Column 5
      Row 3 Column 4 Row 3 Column 5
        Loading editor
    • Azuriee wrote:

      Andrewds1021 wrote:
      So... that is what you are trying to do?

      yea... Is it that complicated? 

      Edit: Forgot to mention, which is more important, how do I make a content table ( I don't know the name) that allows me to put tables inside it, like a bigger table. 

      So, I tried using different methods. Unfortunately, the only reliable method I could find is not possible on Wikia wikis because of the HTML/in-line CSS restrictions that Wikia has. Even then, it only gives the desired appearance, not the actual layout.

        Loading editor
    • Andrewds1021 wrote:

      Azuriee wrote:


      Andrewds1021 wrote:
      So... that is what you are trying to do?
      yea... Is it that complicated? 

      Edit: Forgot to mention, which is more important, how do I make a content table ( I don't know the name) that allows me to put tables inside it, like a bigger table. 

      So, I tried using different methods. Unfortunately, the only reliable method I could find is not possible on Wikia wikis because of the HTML/in-line CSS restrictions that Wikia has. Even then, it only gives the desired appearance, not the actual layout.

      I see. It's quite an optional thing that I wanted to put, nothing important, yet I still wanted to know how. Regardless I'm going to focus on the big table for now, still dont get the desired result.

      EDIT: I was able to pull off having the header inside the top border look. all I did was put a header, "th," with the same background color as the table borders.

        Loading editor
    • Glad it worked out.

        Loading editor
    • Andrewds1021 wrote:
      Glad it worked out.

      Unfortunately, I'm still having issues with the layout of my table though. First, some of the wikitext doesn't stay in the place that I put them in, so if I put them below a cell, next time I edit it'll go somewhere else, either on top of the table or below. Also, I'm still unable to connect the tables together or make a "Big table" here is a picture of what I'm referring to:

      Table444

      If you look closely at the table from the picture, you can see the borders of each table connect with other and they don't overlap. I have tried to make this making(something similar to what you linked before) putting making a table at the beginning of the wikitext/content and then closing the gap between each table, but the border would overlap and give an appearance of a bigger borderline.

        Loading editor
    • I don't quite understand your issue with moving wikitext but have you tried using margin and padding values to collapse the borders? Also, instead of using a bunch of inline CSS, you could use a CSS class.

        Loading editor
    • Andrewds1021 wrote:
      I don't quite understand your issue with moving wikitext but have you tried using margin and padding values to collapse the borders? Also, instead of using a bunch of inline CSS, you could use a CSS class.

      I have tried putting margin and padding values at 0, but they don't seem to collapse. Also what do you mean by "CSS class," if it exactly what I'm thinking, making one inline CSS class instead of a bunch, I don't think that might work since when I do that It doesn't give me the layout I want. Instead of filling the space next to it, it would go down vertically as if it was a list.

        Loading editor
    • Okay, regarding the border, I was incorrect. There is a CSS property for that, border-collapse. With regards to the class, I meant you could give your table a class and then specify everything in a style sheet. That way, you don't have to repeatedly write the styles for each element. Instead, your table would look something like the following.

      <table class="mytable" style="border-color:blue;">
        <caption>Outer Table</caption>
        <tr>
          <td>Row 1 Column 1</td>
          <td>Row 1 Column 2</td>
          <td>Row 1 Column 3</td>
          <td>Row 1 Column 4</td>
          <td>Row 1 Column 5</td>
        </tr>
        <tr>
          <td rowspan="2" colspan="3">
            <table class="mytable" style="border-color:red;">
              <caption>Inner Table (Rows 2-3 Columns 1-3)</caption>
              <tr>
                <td>Row 1 Column 1</td>
                <td>Row 1 Column 2</td>
                <td>Row 1 Column 3</td>
                <td>Row 1 Column 4</td>
              </tr>
              <tr>
                <td>Row 2 Column 1</td>
                <td>Row 2 Column 2</td>
                <td>Row 2 Column 3</td>
                <td>Row 2 Column 4</td>
              </tr>
              <tr>
                <td>Row 3 Column 1</td>
                <td>Row 3 Column 2</td>
                <td>Row 3 Column 3</td>
                <td>Row 3 Column 4</td>
              </tr>
            </table>
          </td>
          <td>Row 2 Column 4</td>
          <td>Row 2 Column 5</td>
        </tr>
        <tr>
          <td>Row 3 Column 4</td>
          <td>Row 3 Column 5</td>
        </tr>
      </table>

      Then, in a style sheet:

      .mytable {
          width: 100%;
          table-layout: fixed;
          border: 1px solid;
          border-collapse: collapse;
      }
       
      .mytable caption {
      <caption styling>
      }
       
      .mytable tr {
      <row styling>
      }
       
      .mytable th {
      <header styling>
      }
       
      .mytable td {
      <cell styling>
      }
        Loading editor
    • Andrewds1021 wrote:
      Okay, regarding the border, I was incorrect. There is a CSS property for that, border-collapse. With regards to the class, I meant you could give your table a class and then specify everything in a style sheet. That way, you don't have to repeatedly write the styles for each element. Instead, your table would look something like the following.
      <table class="mytable" style="border-color:blue;">
        <caption>Outer Table</caption>
        <tr>
          <td>Row 1 Column 1</td>
          <td>Row 1 Column 2</td>
          <td>Row 1 Column 3</td>
          <td>Row 1 Column 4</td>
          <td>Row 1 Column 5</td>
        </tr>
        <tr>
          <td rowspan="2" colspan="3">
            <table class="mytable" style="border-color:red;">
              <caption>Inner Table (Rows 2-3 Columns 1-3)</caption>
              <tr>
                <td>Row 1 Column 1</td>
                <td>Row 1 Column 2</td>
                <td>Row 1 Column 3</td>
                <td>Row 1 Column 4</td>
              </tr>
              <tr>
                <td>Row 2 Column 1</td>
                <td>Row 2 Column 2</td>
                <td>Row 2 Column 3</td>
                <td>Row 2 Column 4</td>
              </tr>
              <tr>
                <td>Row 3 Column 1</td>
                <td>Row 3 Column 2</td>
                <td>Row 3 Column 3</td>
                <td>Row 3 Column 4</td>
              </tr>
            </table>
          </td>
          <td>Row 2 Column 4</td>
          <td>Row 2 Column 5</td>
        </tr>
        <tr>
          <td>Row 3 Column 4</td>
          <td>Row 3 Column 5</td>
        </tr>
      </table>

      Then, in a style sheet:

      .mytable {
          width: 100%;
          table-layout: fixed;
          border: 1px solid;
          border-collapse: collapse;
      }
       
      .mytable caption {
      <caption styling>
      }
       
      .mytable tr {
      <row styling>
      }
       
      .mytable th {
      <header styling>
      }
       
      .mytable td {
      <cell styling>
      }

      so I'd have to use CSS afterall. Alright, I'll get to it in a bit and let you know how it goes.

        Loading editor
    • Well, yes. To do any styling you have to use CSS. It is just a question of which kind (style-sheet or in-line (i.e. style="<in-line CSS>")). At least with the style-sheet, you don't have to repeat in-line CSS for each element. It is up to you which gets used but I would think using style-sheet would be easier.

        Loading editor
    • Andrewds1021 wrote:

      Ok so, I tried it and it does work, the only thing it doesn't show the borders going across (horizontal).

        Loading editor
    • Could you provide links so I can take a look?

        Loading editor
    • Andrewds1021 wrote:
      Could you provide links so I can take a look?

      http://kritika.wikia.com/wiki/Testing_page Im going to allow permission to users in a minute

        Loading editor
    • So, where is it you want the horizontal lines?

      Also, you have a stray CSS property right above the .mytable rule.

      Suggestion

      Doing the following in your style sheet:

      .mytable {
          width: 100%;
          table-layout: fixed;
          border: 4px solid red;
          border-radius: 4px;
          border-collapse: collapse;
          background: black;
          margin: 0em 0px 0px;
          padding: 0em;
          vertical-align: top;
          -webkit-column-gap: 20px;
          -moz-column-gap: 20px;
          column-gap: 20px;
      }
       
      .mytable th,
      .mytable td {
          padding: 0;
      }
       
      .mytable li {
          display: inline-grid;
      }

      Would allow you to simplify your outer table tag to:

      <table class="mytable" style="border-width:6px;">
      your stuff here
      </table>

      Your inner table tag to:

      <table class="mytable">
      your stuff here
      </table>

      And your li tags to:

      <li>
      your stuff here
      </li>

      Edit:

      FYI, cellpadding and cellspacing are not supported in HTML5 (use CSS's padding and column-gap respectively). Also, column-gap is for CSS, not HTML, and the value you have set conflicts with your value for cellspacing. I have modified the above suggestions to include these additional suggested changes.

        Loading editor
    • Andrewds1021 wrote:
      So, where is it you want the horizontal lines?

      Also, you have a stray CSS property right above the .mytable rule.

      Suggestion

      I did that, and I had to remove column-gap because it moved my 2nd table to the right.I also lost the top-border header appearance, now there are tiny gaps between the tables.I want the horizontal lines at the start/stop of each table.

        Loading editor
    • Well, you still haven't gotten rid of that stray property declaration. That may be preventing the application of all your CSS as I don't see anything from the site CSS being applied. As for the horizontal lines, the table border should appear once the CSS is applied.

        Loading editor
    • Andrewds1021 wrote:
      Well, you still haven't gotten rid of that stray property declaration. That may be preventing the application of all your CSS as I don't see anything from the site CSS being applied. As for the horizontal lines, the table border should appear once the CSS is applied.

      which stray declaration is it? 

        Loading editor
    • The one right above the .mytable rule. It is a stray table-layout:fixed.

        Loading editor
    • Andrewds1021 wrote:
      The one right above the .mytable rule. It is a stray table-layout:fixed.

      Oh didn't know you were talking about the css page where I put them in. I removed it, lets see how it goes now

        Loading editor
    • Andrewds1021 wrote:
      The one right above the .mytable rule. It is a stray table-layout:fixed.

      It came back after I removed the stray css, but now 2 of the tables are to the sides, there's a gap to the left between the table and inner tables

        Loading editor
    • Yeah, I see that. Looking into it now. While I am here though, consider adding display: -ms-inline-grid to the line just above display: inline-grid. Doing so will allow your list to display properly in Internet Explorer.

        Loading editor
    • You can use either or both selectors. I have included both so you can choose for yourself but only one is necessary. Note that the only reason the second one works is because you happen to assign mytable to your lists as well. Otherwise, only the first selector would work.

      .mytable ul,
      ul.mytable {
          margin-left: 0;
          width: calc(100% - 8px);
      }
        Loading editor
    • Andrewds1021 wrote:
      You can use either or both selectors. I have included both so you can choose for yourself but only one is necessary. Note that the only reason the second one works is because you happen to assign mytable to your lists as well. Otherwise, only the first selector would work.
      .mytable ul,
      ul.mytable {
          margin-left: 0;
          width: calc(100% - 8px);
      }

      Did that, thanks a lot. All I need for the table is the horizontal line across at the end of each table. 

        Loading editor
    • Andrewds1021 wrote:
      You can use either or both selectors. I have included both so you can choose for yourself but only one is necessary. Note that the only reason the second one works is because you happen to assign mytable to your lists as well. Otherwise, only the first selector would work.
      .mytable ul,
      ul.mytable {
          margin-left: 0;
          width: calc(100% - 8px);
      }

      I figured how to make the border across(isn't exact but is something), the only thing is theres another gap in the left side

        Loading editor
    • Replace this:

      ul.mytable {
          margin-left: 0;
          width: calc(100% - 8px);
      }

      And this:

      <ul style="border-bottom-width: 3px; border-bottom-color: red; border-bottom-style: solid;">
      your stuff here
      </ul>

      With this:

      .mytable ul {
          margin-left: 0;
          width: 100%;
          border-bottom: 3px solid red;
      }

      And this:

      <ul>
      your stuff here
      </ul>

      Edit:

      You can also replace this:

      .mytable {
          width: 100%;
          table-layout: fixed;
          border: 4px solid red;
          border-radius: 4px;
          border-collapse: collapse;
          background: black;
          margin: 0em 0px 0px;
          padding: 0em;
          vertical-align: top;
      }

      And this:

      <table class="mytable" style="border-width: 6px; border-radius: 4px;">
      your stuff here
      </table>

      With this:

      .mytable {
          width: 100%;
          table-layout: fixed;
          border: 6px solid red;
          border-radius: 4px;
          border-collapse: collapse;
          background: black;
          margin: 0em 0px 0px;
          padding: 0em;
          vertical-align: top;
      }

      And this:

      <table class="mytable">
      your stuff here
      </table>
        Loading editor
    • Andrewds1021 wrote:
      Replace this:

      I've started to think isn't there a specific table layout already for this? like an "article table" thing?

        Loading editor
    • It is possible. I am not familiar with the ins and outs of the default css. I know you can use the class wikitable but that produces:

      Caption
      Header 1 Header 2
      Cell 1-1 Cell 1-2
      Cell 2-1 Cell 2-2
        Loading editor
    • Andrewds1021 wrote:
      It is possible. I am not familiar with the ins and outs of the default css. I know you can use the class wikitable but that produces:
      Caption
      Header 1 Header 2
      Cell 1-1 Cell 1-2
      Cell 2-1 Cell 2-2

      Hey thanks a lot for helping me out so far, but I'm going to leave the table like that for now, I have to move on to fill the rest of the wiki. Having that mentioned, do you know how I can put the names below the images inside "ul - li" format style.

        Loading editor
    • <li><div class="roundedcorner">[[File:Levelupicon.png]]<br />Leveling</div></li>
        Loading editor
    • Andrewds1021 wrote:
      <li><div class="roundedcorner">[[File:Levelupicon.png]]<br />Leveling</div></li>

      oh didnt know a breaker would work, I should've tried this. Thanks.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message