Post by illirica on Feb 7, 2021 18:33:38 GMT
Element Spacing
So, what if you wanted some space between those table elements? In order to do this, we're going to use the border-collapse and the border-spacing tags. The border-collapse tag is what kicks this off and makes it work, use border-collapse: separate to get started. You can also use border-collapse:collapse to remove all border-spacing, but that's pretty much the same as just not using border-spacing in the first place - this is also the default value if nothing is entered. There may be some niche cases where you want that entered manually, but for the most part you'll be using either border-collapse:separate or just not defining these values at all. It's possible that there are other options besides collapse and separate, but I have not found them yet.
Border-spacing is pretty evident: You use a defined value to state the space between each element in the table. This value can be defined in terms of pixels (px), view (vw), or width of the letter M in your current font (em) but not in percent (%) or fractions (fr).
border-spacing:3px:
border-spacing: 3vw:
border-spacing: 3em:
Your code will look something like this:
{table style="border-collapse: separate; border-spacing: 3px;"}{tbody}
{tr}
{td style="border: 1px solid #0000FF; padding: 3px;"}Row 1 column 1{/td}
{td style="border: 1px solid #0000FF; padding: 3px;"}Row 1 column 2{/td}
{/tr}
{tr}
{td style="border: 1px solid #0000FF; padding: 3px;"}Row 2 column 1{/td}
{td style="border: 1px solid #0000FF; padding: 3px;"}Row 2 column 2{/td}
{/tr}
{/tbody}{/table}
You can only use this spacing code on the table as a whole - you can't use it on individual elements like each row or each doohickey. That means that no, you can't have a 3px space between each doohickey in the row and a 10px space between each row. You'll need to use defined margins to make this happen instead. Note that the spacing code also includes a space on the outside, not just between elements - it is a full surrounding margin.
So, what if you wanted some space between those table elements? In order to do this, we're going to use the border-collapse and the border-spacing tags. The border-collapse tag is what kicks this off and makes it work, use border-collapse: separate to get started. You can also use border-collapse:collapse to remove all border-spacing, but that's pretty much the same as just not using border-spacing in the first place - this is also the default value if nothing is entered. There may be some niche cases where you want that entered manually, but for the most part you'll be using either border-collapse:separate or just not defining these values at all. It's possible that there are other options besides collapse and separate, but I have not found them yet.
Border-spacing is pretty evident: You use a defined value to state the space between each element in the table. This value can be defined in terms of pixels (px), view (vw), or width of the letter M in your current font (em) but not in percent (%) or fractions (fr).
border-spacing:3px:
Row 1 column 1 | Row 1 column 2 |
Row 2 column 1 | Row 2 column 2 |
border-spacing: 3vw:
Row 1 column 1 | Row 1 column 2 |
Row 2 column 1 | Row 2 column 2 |
border-spacing: 3em:
Row 1 column 1 | Row 1 column 2 |
Row 2 column 1 | Row 2 column 2 |
Your code will look something like this:
{table style="border-collapse: separate; border-spacing: 3px;"}{tbody}
{tr}
{td style="border: 1px solid #0000FF; padding: 3px;"}Row 1 column 1{/td}
{td style="border: 1px solid #0000FF; padding: 3px;"}Row 1 column 2{/td}
{/tr}
{tr}
{td style="border: 1px solid #0000FF; padding: 3px;"}Row 2 column 1{/td}
{td style="border: 1px solid #0000FF; padding: 3px;"}Row 2 column 2{/td}
{/tr}
{/tbody}{/table}
You can only use this spacing code on the table as a whole - you can't use it on individual elements like each row or each doohickey. That means that no, you can't have a 3px space between each doohickey in the row and a 10px space between each row. You'll need to use defined margins to make this happen instead. Note that the spacing code also includes a space on the outside, not just between elements - it is a full surrounding margin.