Additional advantage is that this allows much more abstraction freedom. The CSS is reusable on multiple elements without the need to add selectors and/or copypaste properties when you want to reuse the same properties on another element(s).

Since JSF 2.x only: change the JSF default UINamingContainer separator by the following context param in web.xml. E.g.

Disadvantage is that you need to ensure that you don't use this character yourself anywhere in the ids.

Since JSF 1.2 only: disable prepending of the form id.

<h:form prependId="false">
<h:dataTable id="phoneTable">

so that you can use

#phoneTable {
background: pink;
}

Disadvantage is that <f:ajax> won't be able to find it.

In your specific case, I think turning it into a CSS class as described in #2 is the most appropriate solution. A "phone table" namely doesn't seem to represent a website-wide unique element. Real website-wide unique elements such as header, menu, content, footer, etc are usually not wrapped in JSF forms or other JSF naming containers, so their IDs wouldn't be prefixed anyway.