Css for table. Two columns. Need outside border and 1 vertical border down middle

Well

This is so simple I am almost ashamed to ask.  However as I think about it, I am always in for a surprise for even my most simple questions on EE -- including "best practices" etc, that I don't always find elsewhere..   So here goes.

I have a table I want to style with css.

1)  It's a two column table.
2)  I want the outside of the table to have a 1 pixel border (collapsed)
3)  And a 1 pixel border vertically down the middle.

And while we're at it.  I might as well have the css for a three column border with two vertical columns down the middle.

And finally, in SOME rows I want to be able to have an indention of 10 px before the wording starts.  Not in all rows, just in some.  I guess I could do it with spaces, but I figure there's a better way with css......


Thanks!

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
>if you're still using tables, you should consider not doing so.

Tables are great for tabular data.  Not so great for layout.  We don't know what the able is being use for at this point.

>The problem is this is going to be  a template that will be used for different tables on different pages in the future, and those tables will need "indentions" in different cells and columns, depending on the text content.

Set up specific classes that will take care of what you want.  In tinymce, you can include all or portions of your css that your users can have access to.  By including your custom css styles, they can show up in the styles drop down.  Just name the classes something easy they will understand.

>I don't want them to touch a stylesheet
Correct, they wouldn't touch the style sheet, especially if you are using tinymce or similar.  You do want to set the classes up for them in the style sheet.

>So I understand EE's terms and conditions, etc, could that link have been included in a comment --  if the Expert also included their suggested solution?

Yes, links can be a back up to an answer, but they should not BE the answer.  

>padas, im not sure why you repeated my solution?

I am working on multiple projects including answering this question and already started on this answer prior to you posting.  As it turns out, I posted a working code sample.  I assure you, I don't need to see what somebody else posts in webdev and then try and repeat their answer.  It was just two similar ideas.
0
 
Kyle HamiltonData ScientistCommented:
hi rowby,

if you're still using tables, you should consider not doing so.

but if you have no other choice, then you'll need to apply styles to the tds to get your lines down the columns. for example:

tr td:nth-child(x){
  border-right:1px solid black;
}
depending on which "column" you want to have the line, you can use :nth-child(x), where x is a number.

for the whole table you can just do:

table{
border:1px solid black;
}
0
 
Kyle HamiltonData ScientistCommented:
you can apply a class to certain tds to get the indetation:

<td class="pad10">

.pad10{
padding;10px;
}
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
Rowby GorenAuthor Commented:
Hi all

Kyle, I see your indention solution, but because people with very little css tech will be doing some of the various table styling down the road, can I create a style for just the text in a cell, that could be applied as a span, for instance, so they would not have to go into the stylesheet itself whenever they want to indent some text in a table cell.  (How is that for a run-on sentence!)
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
2 column table  http://jsbin.com/padasQ_28348454/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    table{
border-collapse:collapse;
border-style:solid;
border-color:red;     
}
table td:nth-child(2){border-left:solid;}
    table td{padding-left:10px;}    

  </style>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <table>
    <tr><td>r1 c1</td><td>r1 c2</td></tr>
      <tr><td>r2 c1</td><td>r2 c2</td></tr>
     <tr><td>r3 c1</td><td>r3 c2</td></tr>
  </table>
</body>
</html>
  

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It would be best if you can add the style to the style sheet, then nobody needs to worry about padding and borders, just entering in text.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
3 col http://jsbin.com/padasQ_28348454/2/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    table{
border-collapse:collapse;
border-style:solid;
border-color:red;     
}
table td:nth-child(2),table td:nth-child(3){border-left:solid;}
    table td{padding-left:10px;}    

  </style>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <table>
    <tr><td>r1 c1</td><td>r1 c2</td><td>r1 c3</td></tr>
      <tr><td>r2 c1</td><td>r2 c2</td><td>r2 c3</td></tr>
     <tr><td>r3 c1</td><td>r3 c2</td><td>r3 c3</td></tr>
  </table>
</body>
</html>
  

Open in new window

0
 
Rowby GorenAuthor Commented:
Hi Padas,

The problem is this is going to be  a template that will be used for different tables on different pages in the future, and those tables will need "indentions" in different cells and columns, depending on the text content.

I don't want them to touch a stylesheet (they wouldn 't know how to do that anyway) -- which is why I would rather that they highlight any text they want "indented" and choose the "indent" span from the drop down menu that is in the editing system -- and only that line will be indented.

????

Rowby
0
 
Rowby GorenAuthor Commented:
Padas,

On a side note, I caught the link to the other site before it was deleted.  I found it very useful and informative and I bookmarked it.

So I understand EE's terms and conditions, etc, could that link have been included in a comment --  if the Expert also included their suggested solution?

Rowby
0
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
i dont know which text editor library you're using. in TINYMCE for example, you can create your own rules and make them available in the drop-down
0
 
Kyle HamiltonData ScientistCommented:
padas, im not sure why you repeated my solution?
0
 
Rowby GorenAuthor Commented:
Yes, Kyke, it is an editor based on TINYMCE, so a dropdown will be available.  So that would be what I would have them use for a generic "tab" on any specific text in a column.  I think the span/style should only be an "indent" -- so the text will take the font, etc from whatever has been set up for the table -- most likely body text.

Rowby
0
 
Kyle HamiltonData ScientistCommented:
an"indent" would typically be implemented as padding. you will not lose any other inherited styles by applying padding.

if you need help setting up the editor to display the option, please post more details, or a link
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can indent by giving a td a class instead http://jsbin.com/padasQ_28348454/3/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <style>
    table{
      width:300px;      
border-collapse:collapse;
border-style:solid;
border-color:red;     
}
table td:nth-child(2){border-left:solid;}
   .indent10px{padding-left:10px;}   
   .indent20px{padding-left:20px;} 
  
  </style>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <table>
    <tr><td class="indent10px">r1 c1</td><td>r1 c2</td></tr>
      <tr><td class="indent20px">r2 c1</td><td>r2 c2</td></tr>
     <tr><td class="indent10px">r3 c1</td><td>r3 c2</td></tr>
  </table>
</body>
</html>
  

Open in new window


A few of helpful links
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
http://coboldinosaur.com/pages/Tables-Part-2.html  Cd& is a top CSS expert here
http://www.w3schools.com/tags/att_table_cellpadding.asp
0
 
Rowby GorenAuthor Commented:
Hi  The table will be for tabular data and for this particular situation it has to be a table.

We are almost finished and I will be splitting points for the solution....

So I have all the info I need for styling borders, I think.

And I just have to create my span (TinyMCE) style for the text with the padding on the left.

Since the text will be in a cell I am assuming that the style will not be based on a paragraph (p) style, but can be focused on text in a table cell.

So based on text being in a table cell, I assume I can use Hamilton's

.pad10{
padding;10px;
}

...in my stylesheet and give it a nice name for non-css "civilians" such as

.indentpad10 {
padding:10px;
)

Then the user can highlight the text, and apply the style from the dropdown resulting in the text being indented.  

Right??

Thanks

Rowby
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>span (TinyMCE) style for the text with the padding on the left.

You don't have to use a span.  I would simply apply the style to the td that you want the padding.  

Either way gives the same visual experience.
0
 
Rowby GorenAuthor Commented:
Hi Padas,

 I would simply apply the style to the td that you want the padding.  
If I am interpreting your suggestion, I don't want to put the style in the HTML  td itself, since some versions of the table will not have the "indent" in the same cell.

The table will become a editor template which users can use over and over again for similar tabular data.  And in some cases there will be no indents of data and in some cases different texts in cells will or will not have "indents".

 So I want to be able to do my "indenting" via a dropdown in the TinyMC Editor

Rowby
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You are interpreting my suggestion in the wrong way.  I never would suggest to style the table directly.  If you look at my sample, I am suggesting to create your classes that will be used for your indenting.  Load those classes in the custom css http://www.tinymce.com/tryit/custom_formats.php

When somebody is editing data in the table, and they want the indent, they will choose the drop down for your indent class.  There is no need to apply it to a span. That just creates another tag that is not needed.  

After you create the class, then the user applies the class to their text.  If you look at my answer http:#a39810292, I have suggested to use a class.  The example uses indent10px or indent20px.  In this case, it would not matter if it was a table td or a paragraph. By applying that class, it will indent.   I wouldn't get hung up on if it is a td or div or span.
0
 
Rowby GorenAuthor Commented:
Thanks, Scott.  

I will begin applying yours and others suggestions a little later today.

Thanks all!

Rowby
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
One  quick clarification, if you create a custom css just for tinymce, you still have to put those styles in your css the site will access.  I prefer to not put the full css in tinymce, just what is needed.
0
 
Rowby GorenAuthor Commented:
thanks Scott and Kyle,

I got all the information to fix my table.

Sorry for the delay in awarding the poiints!

Rowby
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.