This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Generate HTML Div table grids for websites in just a few easy steps. Set the options then select the desired size. Adjust the options in the interactive editors
Free online interactive HTML Table and structured div grid styler and code generator. Select a style from the gallery and adjust the settings to get the HTML and CSS codes.
The first two made me find the last one, which is best as it has a CSS demo button (that also works on the WayBack link), a list of examples, and even better, answers the above questions with the “border-style” list below.
I rephrased their list into a table emphasising the clock-wise order:
The number of values determine the sides affected; thinking clock-wise is easiest to get it:
# values
affected sides
example
top
right
bottom
left
1
all: top, right, bottom, left
solid
solid
solid
solid
solid
2
top & bottom, right & left
none solid
none
solid
none
solid
3
top, right & left, bttom
dotted none solid
dotted
none
solid
none
4
top, right, bottom, left
double dotted solid none
double
dotted
solid
none
Their list:
The border-style property may be specified using one, two, three, or four values.
When one value is specified, it applies the same style to all four sides.
When two values are specified, the first style applies to the top and bottom, the second to the left and right.
When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).
Each value is a keyword chosen from the list below.
then it continues with a table showing the outcome of the various line style values you can put in:
<line-style>
Describes the style of the border. It can have the following values:
none
Like the hidden keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
hidden
Like the none keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highestpriority: if any other conflicting border is set, it won’t be displayed.
dotted
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated border-top-width.
dashed
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
Displays a border with a carved appearance. It is the opposite of ridge.
ridge
Displays a border with an extruded appearance. It is the opposite of groove.
inset
Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
outset
Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.
This is not just limited to top rows, you can use it any where:
in the left column
in any other row
in any other column
in individual cells
In addition, a table can also have a caption, which is not just useful for screen-readers: it benefits general readability.
Quoting the page:
For such tables, use the <th> element to identify the header cells and the scope attribute to declare the direction of each header. The scopeattribute can be set to row or col to denote that a header applies to the entire row or column, respectively.
Additionally, you can use the <caption> element to identify the table in a document. This is particularly useful for screen-reader users browsing the web page in “table mode” where they can navigate from table to table.
This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn’t really work with images because there the colors change a lot pixel to pixel.
# Images & HTML Elements
Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.
# Mockups
Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.
# Keyboard Shortcut
You can start and stop dimensions with the ALT + D shortcut.
# Area Boundaries
Wanna get the radius of a circle? Is text standing in your way? Press Alt to measure the dimensions of a connected area.
Being a back-end and library person by heart, I am always late in the web-UI game, so this is on my list of things to try: CSS flex-box layout – Wikipedia.
I saw it being used by [WayBack] markdownlint demo: Demo for markdownlint, a Node.js style checker and lint tool for Markdown/CommonMark files.
Since various terminals have a different mapping from colours in the ANSI escape code colour table, I used the standard HTML colours using (which slightly differs from the Terminal.app screenshot on the right):
The following code with escaping can ensure script and style elements will work in both XHTML and HTML, including older browsers.
In both cases, XML ignores the first comment and then uses the CDATA section to avoid the need for escaping special characters < and & within the rest of the contents (with subsequent JavaScript comments added within to ensure the HTML-oriented code is ignored by JavaScript).
In HTML, older browsers might display the content without the content being within a comment, so comments are used to hide this from them (while modern HTML browsers will run code inside the comments). The subsequent JavaScript comment is added to negate the text added for the sake of XHTML.
The <style> requires the /**/ comments since CSS does not support the single line ones.
The Wiert Corner - irregular stream of stuff 