Creating unique tables

• 

  gotmaester · Member · Aug 10, 2017 at 1:22 pm

  • Copy link
  • Add topic to favorites

  I am in the process of creating “table boxes” within the text. I have created one of these boxes (Discussion Topic) on the following page which can be found in the center column.

  https://game-of-thrones-episodes.com/2017/08/06/dragonstones-cave-drawings/

  Can someone please look at my code. I don’t really, however, want to be using the global table property settings (who knows what else this might be affecting. I much rather create unique tables (i.e. table1, table2, table3), so I can have different color tables for different things. One table for discussion, another for notes/analysis, etc.

  table {
  border: 1px solid darkred;
  width: 200px;
  float: right;
  text-align: center;
  margin: 0 0 10px 20px;
  }

  th {
  background: darkred;
  color: white;
  line-height: .7;
  }

  td {
  line-height: 1.1;
  font-size: 9pt;
  padding: 7pt;
  }

  Earlier, @Sacredpath helped me with creating a unique column setting using the following code, but I don’t know how to do the same with what I want to do above:

  .my-columns {
  font-size: 10pt;
  margin-top: 20pt;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  }

  Then place this where you want it in text.

  xxxxxxx your text xxxxxxxxxxx

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Aug 11, 2017 at 1:11 am

  • Copy link

  You can assign a CSS class to each table as needed for your different needs and then create the necessary CSS. You mention discussion as one type of table, so in the opening table tag you would assign a CSS class like this.
  <table class="my-disc">
  and then based on your example CSS above, you would do this.

  table.my-disc {
  border: 1px solid darkred;
  width: 200px;
  float: right;
  text-align: center;
  margin: 0 0 10px 20px;
  }
  
  .my-disc th {
  background: darkred;
  color: white;
  line-height: .7;
  }
  
  .my-disc td {
  line-height: 1.1;
  font-size: 9pt;
  padding: 7pt;
  }

• 

  gotmaester · Member · Aug 11, 2017 at 2:40 am

  • Copy link

  cool. So that is how that works. Thanks, as always.

• 

  thesacredpath · Member · Aug 11, 2017 at 3:03 am

  • Copy link

  You are welcome.