The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 2,319 other followers

Archive for the ‘HTML’ Category

HTML Div Table – Online Tools

Posted by jpluimers on 2021/02/02

[WayBack] HTML Div Table – Online Tools:

Free online tools to make Div Table composing a piece of cake! HTML table generator and converter with interactive source editor and much more!

I hope this still exists, as the first time it helped me convert HTML table based tables to div based tables.

They had these tools back then:

  • [WayBack] HTML Div Table Generator

    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

  • [WayBack] HTML Table to Div Converter

    Transform traditional HTML Tables to Div Tables. Copy and convert any visual table document to Div tables with a simple click of a button

  • [WayBack] HTML Table Styler 📅 CSS Generator

    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.

–jeroen

Posted in Development, HTML, Software Development, Web Development | Leave a Comment »

HTML table border styles

Posted by jpluimers on 2021/01/20

I always get confused when I see this kind of HTML:

<td style="border: 1px black; border-style: none solid solid;">

This raises questions like:

  • When less than 4 borders are mentioned, which borders are solid, and which borders are none?
  • What is the order of 0…4 borders?

Luckily these links helped me:

  1. [WayBack] w3schools: CSS border-style property
  2. [WayBack] w3schools: CSS Borders
  3. [WayBack] border-style – CSS: Cascading Style Sheets | MDNThe border-style CSS property is a shorthand property that sets the line style for all four sides of an element’s border.

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 toprightbottom, 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.
solid
Displays a single, straight, solid line.
double
Displays two straight lines that add up to the pixel size defined by border-width or border-top-width.
groove
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.

–jeroen

Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

Tables with two headers • Tables • WAI Web Accessibility Tutorials

Posted by jpluimers on 2020/12/08

Since I always forget that you can have any cell marked as th to make it a header: [WayBack] Tables with two headers • Tables • WAI Web Accessibility Tutorials.

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.

Examples on that page:

–jeroen

Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

html – Is it possible to specify a starting number for an ordered list? – Stack Overflow

Posted by jpluimers on 2020/11/03

Since I keep forgetting this has been possible since the introduction of html 5: [WayBack] html – Is it possible to specify a starting number for an ordered list? – Stack Overflow:

If you need the functionality to start an ordered list (OL) at a specific point, you’ll have to specify your doctype as HTML 5; which is:

<!doctype html>

With that doctype, it is valid to set a start attribute on an ordered list. Such as:

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

–jeroen

Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

Dimensions – Chrome Web Store

Posted by jpluimers on 2020/10/13

[WayBack/Archive.isDimensions – Chrome Web Store: A tool for designers to measure screen dimensions

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.

–jeroen

Via:

Posted in Chrome, Chrome, Development, Google, HTML, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »

 
<span>%d</span> bloggers like this: